<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一体化作战平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js" defer></script>
    
    <!-- 预加载关键资源 -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="preconnect" href="https://cdn.tailwindcss.com">
    <link rel="preconnect" href="https://picsum.photos">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066cc',
                        secondary: '#0099cc',
                        success: '#009966',
                        warning: '#ff9900',
                        danger: '#cc3300',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#c0c4cc',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1f2937',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .lazy-img {
                loading: lazy;
                transition: opacity 0.3s ease-in-out;
            }
            .lazy-img[data-loaded="false"] {
                opacity: 0;
            }
            .lazy-img[data-loaded="true"] {
                opacity: 1;
            }
        }
    </style>
    
    <!-- 优先级徽章样式 -->
    <style>
        .badge-priority-high {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 9999px;
            background-color: #fee2e2;
            color: #dc2626;
        }
        .badge-priority-medium {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 9999px;
            background-color: #fef3c7;
            color: #d97706;
        }
        .badge-priority-low {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 9999px;
            background-color: #d1fae5;
            color: #059669;
        }
        
        /* 标签页样式 */
        .tab-button {
            transition: all 0.3s ease;
        }
        .tab-button.active {
            font-weight: 600;
        }
        .tab-button:hover {
            background-color: rgba(0, 102, 204, 0.05);
        }
        
        /* 表单获取焦点样式 */
        input:focus, select:focus, textarea:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between px-4 py-3">
            <!-- Logo和标题 -->
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-primary rounded-md flex items-center justify-center text-white">
                    <i class="fa fa-bank text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-neutral-700 hidden md:block">一体化作战平台</h1>
                <h1 class="text-lg font-bold text-neutral-700 md:hidden">研发交付平台</h1>
            </div>
            
            <!-- 搜索框 -->
            <div class="hidden md:flex relative flex-1 max-w-md mx-4">
                <input type="text" placeholder="搜索任务..." 
                    class="w-full pl-10 pr-4 py-2 rounded-md border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>
            
            <!-- 右侧用户区域 -->
            <div class="flex items-center space-x-1 md:space-x-4">
                <!-- 通知按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300">
                    <i class="fa fa-bell-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                </button>
                
                <!-- 消息按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300 hidden md:block">
                    <i class="fa fa-envelope-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-primary rounded-full"></span>
                </button>
                
                <!-- 用户头像 -->
                <div class="flex items-center space-x-2 ml-2">
                    <div class="w-8 h-8 bg-neutral-200 rounded-full overflow-hidden">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-full h-full object-cover lazy-img" loading="lazy" data-loaded="false">
                    </div>
                    <span class="hidden md:block text-sm font-medium text-neutral-700">张三</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="flex pt-16 flex-1">
        <!-- 左侧导航菜单 -->
        <aside class="w-16 md:w-64 bg-white shadow-sm fixed h-full left-0 top-16 overflow-y-auto scrollbar-hide transform md:transform-none transition-transform duration-300 z-40 -translate-x-full md:translate-x-0">
            <nav class="py-4">
                <ul>
                    <!-- 主导航项 -->
                    <li class="mb-1">
                        <a href="#dashboard" class="flex items-center space-x-3 px-4 py-3 text-primary bg-primary/5 border-r-4 border-primary">
                            <i class="fa fa-tachometer text-lg"></i>
                            <span class="hidden md:block font-medium">首页</span>
                        </a>
                    </li>
                    
                    <!-- 交付流程模块 -->
                    <li class="mb-1">
                        <a href="business_strategy.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-line-chart text-lg"></i>
                            <span class="hidden md:block">业务战略</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="architecture-management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-sitemap text-lg"></i>
                            <span class="hidden md:block">架构管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="requirementsManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-list-alt text-lg"></i>
                            <span class="hidden md:block">需求管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="design-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="design_management.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-paint-brush text-lg"></i>
                                    <span class="hidden md:block">设计管理</span>
                                </a>
                                <button id="design-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="design-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="interface_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-plug text-sm"></i>
                                        <span class="hidden md:block">接口管理</span>
                                    </a>
                                    <a href="model_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cubes text-sm"></i>
                                        <span class="hidden md:block">模型管理</span>
                                    </a>
                                    <a href="data_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-database text-sm"></i>
                                        <span class="hidden md:block">字典管理</span>
                                    </a>
                                    <a href="ui_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-desktop text-sm"></i>
                                        <span class="hidden md:block">差异分析</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="schedule_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-calendar text-lg"></i>
                            <span class="hidden md:block">排期管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="developmentMage.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-code text-lg"></i>
                            <span class="hidden md:block">开发管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="test-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="testManagement.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-bug text-lg"></i>
                                    <span class="hidden md:block">测试管理</span>
                                </a>
                                <button id="test-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="test-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="test_cases.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-file-text-o text-sm"></i>
                                        <span class="hidden md:block">测试案例</span>
                                    </a>
                                    <a href="test_plans.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-calendar-check-o text-sm"></i>
                                        <span class="hidden md:block">测试计划</span>
                                    </a>
                                    <a href="test_reports.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-bar-chart text-sm"></i>
                                        <span class="hidden md:block">测试报告</span>
                                    </a>
                                    <a href="test_global_settings.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cogs text-sm"></i>
                                        <span class="hidden md:block">全局设置</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="production_workflow.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-rocket text-lg"></i>
                            <span class="hidden md:block">投产上线</span>
                        </a>
                    </li>
                    
                    <!-- 新增的三个子菜单项 -->
                    <li class="mb-1">
                        <a href="quality_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-check-circle text-lg"></i>
                            <span class="hidden md:block">质量管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="security_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-shield text-lg"></i>
                            <span class="hidden md:block">安全管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="efficiency_metrics.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-bar-chart text-lg"></i>
                            <span class="hidden md:block">效能度量</span>
                        </a>
                    </li>
                    
                    <!-- 分隔线 -->
                    <li class="my-2">
                        <div class="border-t border-neutral-200 mx-4"></div>
                    </li>
                    
                    <!-- 公共模块 -->
                    <li class="mb-1">
                        <a href="teamManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-users text-lg"></i>
                            <span class="hidden md:block">团队管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="settings.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-cog text-lg"></i>
                            <span class="hidden md:block">设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 ml-16 md:ml-64 p-4 md:p-6 bg-neutral-100 min-h-screen">
            <!-- 面包屑导航 -->
            <div class="mb-6">
                <nav class="flex" aria-label="面包屑">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="#dashboard" class="inline-flex items-center text-sm font-medium text-neutral-500 hover:text-primary">
                                <i class="fa fa-home mr-2"></i>
                                首页
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <i class="fa fa-chevron-right text-neutral-400 text-xs mx-2"></i>
                                <span class="text-sm font-medium text-neutral-700">工作台</span>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- 数据概览卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
                <!-- 待办任务 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">待办任务</p>
                            <h3 class="text-2xl font-bold text-neutral-700">24</h3>
                            <p class="text-success text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 12% 较上周
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-tasks"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 进行中项目 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">进行中排期</p>
                            <h3 class="text-2xl font-bold text-neutral-700">8</h3>
                            <p class="text-danger text-xs mt-2">
                                <i class="fa fa-arrow-down"></i> 3% 较上周
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                            <i class="fa fa-cubes"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 本月投产 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">本月投产</p>
                            <h3 class="text-2xl font-bold text-neutral-700">12</h3>
                            <p class="text-success text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 8% 较上月
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success">
                            <i class="fa fa-rocket"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 逾期任务 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">逾期任务</p>
                            <h3 class="text-2xl font-bold text-neutral-700">3</h3>
                            <p class="text-danger text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 1 较上周
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                            <i class="fa fa-exclamation-circle"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表和内容区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6 mb-6">
                <!-- 左侧图表 -->
                <div class="bg-white rounded-lg shadow-card p-4 md:p-6 lg:col-span-2">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">排期进度概览</h2>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-md">周</button>
                            <button class="px-3 py-1 text-xs text-neutral-500 hover:bg-neutral-100 rounded-md">月</button>
                            <button class="px-3 py-1 text-xs text-neutral-500 hover:bg-neutral-100 rounded-md">季</button>
                        </div>
                    </div>
                    <div class="h-64">
                        <canvas id="projectProgressChart"></canvas>
                    </div>
                </div>
                
                <!-- 右侧图表 -->
                <div class="bg-white rounded-lg shadow-card p-4 md:p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">流程阶段分布</h2>
                        <button class="text-neutral-400 hover:text-neutral-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="processDistributionChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 待办任务和通知 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6 mb-6">
                <!-- 待办任务列表 -->
                <div class="bg-white rounded-lg shadow-card p-4 md:p-6 lg:col-span-2">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">待办任务</h2>
                        <div class="flex items-center space-x-2">
                            <button id="create-task-btn" class="px-3 py-1.5 bg-primary text-white rounded-md text-xs hover:bg-primary/90 transition-all-300 flex items-center">
                                <i class="fa fa-plus mr-1"></i> 创建任务
                            </button>
                            <span class="text-xs text-neutral-500">共 <span id="totalTasks">10</span> 项</span>
                            <a href="#tasks" class="text-primary text-sm hover:underline">查看全部</a>
                        </div>
                    </div>
                    
                    <!-- 任务表格容器 -->
                    <div class="overflow-x-auto mb-4">
                        <table class="min-w-full divide-y divide-neutral-200">
                            <thead class="bg-neutral-50">
                                <tr>
                                    <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                        任务名称
                                    </th>
                                    <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                        任务ID
                                    </th>
                                    <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                        任务阶段
                                    </th>
                                    <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                        任务类型
                                    </th>
                                    <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                        完成日期
                                    </th>
                                    <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                        负责人
                                    </th>
                                    <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                        优先级
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="taskListContainer" class="bg-white divide-y divide-neutral-200">
                                <!-- 任务行将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页控件 -->
                    <div class="flex items-center justify-between pt-4 border-t border-neutral-200">
                        <div class="text-sm text-neutral-500">
                            显示第 <span id="pageStart">1</span>-<span id="pageEnd">5</span> 项
                        </div>
                        <div class="flex items-center space-x-1">
                            <button id="prevPageBtn" onclick="changePage(-1)" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="fa fa-chevron-left"></i>
                            </button>
                            <div id="pageNumbers" class="flex items-center space-x-1">
                                <!-- 页码按钮将通过JavaScript动态生成 -->
                            </div>
                            <button id="nextPageBtn" onclick="changePage(1)" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300 disabled:opacity-50 disabled:cursor-not-allowed">
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 通知公告 -->
                <div class="bg-white rounded-lg shadow-card p-4 md:p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">通知公告</h2>
                        <a href="#notifications" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    <div class="space-y-4">
                        <!-- 通知项 -->
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3 flex-shrink-0">
                                <i class="fa fa-bullhorn"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-neutral-700 text-sm">系统版本更新通知</h3>
                                <p class="text-xs text-neutral-500 mt-1">平台将于今晚22:00-24:00进行版本更新维护，请提前做好准备</p>
                                <p class="text-xs text-neutral-400 mt-1">2小时前</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-success/10 flex items-center justify-center text-success mr-3 flex-shrink-0">
                                <i class="fa fa-check-circle"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-neutral-700 text-sm">项目投产成功</h3>
                                <p class="text-xs text-neutral-500 mt-1">您负责的"手机银行转账功能优化"项目已成功投产上线</p>
                                <p class="text-xs text-neutral-400 mt-1">昨天 16:30</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-3 flex-shrink-0">
                                <i class="fa fa-exclamation-triangle"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-neutral-700 text-sm">任务即将逾期提醒</h3>
                                <p class="text-xs text-neutral-500 mt-1">您有3项任务将在未来3天内到期，请及时处理</p>
                                <p class="text-xs text-neutral-400 mt-1">昨天 10:15</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-600 mr-3 flex-shrink-0">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-neutral-700 text-sm">月度研发会议</h3>
                                <p class="text-xs text-neutral-500 mt-1">下周二下午14:00将召开月度研发总结会议，请准时参加</p>
                                <p class="text-xs text-neutral-400 mt-1">2023-06-05</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 团队和系统信息 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
                <!-- 我的团队 -->
                <div class="bg-white rounded-lg shadow-card p-4 md:p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">我的团队</h2>
                        <a href="#team" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    <div class="space-y-3">
                        <!-- 团队列表 -->
                        <div class="flex items-center p-2 hover:bg-neutral-50 rounded-md transition-all-300 cursor-pointer" onclick="openTeamDetailModal('AA架构团队', 'solution', '1001')">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://picsum.photos/id/1001/200/200" alt="团队列表" class="w-full h-full object-cover lazy-img" loading="lazy" data-loaded="false">
                            </div>
                            <div class="flex-1">
                                <h3 class="font-medium text-neutral-700">AA架构团队</h3>
                                <p class="text-xs text-neutral-500">解决方案</p>
                            </div>
                            <button class="text-neutral-400 hover:text-primary" onclick="event.stopPropagation();">
                                <i class="fa fa-comment-o"></i>
                            </button>
                        </div>
                        
                        <div class="flex items-center p-2 hover:bg-neutral-50 rounded-md transition-all-300 cursor-pointer" onclick="openTeamDetailModal('BB应用设计团队', 'application', '1002')">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://picsum.photos/id/1002/200/200" alt="团队列表" class="w-full h-full object-cover lazy-img" loading="lazy" data-loaded="false">
                            </div>
                            <div class="flex-1">
                                <h3 class="font-medium text-neutral-700">BB应用设计团队</h3>
                                <p class="text-xs text-neutral-500">应用设计</p>
                            </div>
                            <button class="text-neutral-400 hover:text-primary" onclick="event.stopPropagation();">
                                <i class="fa fa-comment-o"></i>
                            </button>
                        </div>
                        
                        <div class="flex items-center p-2 hover:bg-neutral-50 rounded-md transition-all-300 cursor-pointer" onclick="openTeamDetailModal('CC研发团队', 'development', '1003')">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://picsum.photos/id/1003/200/200" alt="团队列表" class="w-full h-full object-cover lazy-img" loading="lazy" data-loaded="false">
                            </div>
                            <div class="flex-1">
                                <h3 class="font-medium text-neutral-700">CC研发团队</h3>
                                <p class="text-xs text-neutral-500">开发</p>
                            </div>
                            <button class="text-neutral-400 hover:text-primary" onclick="event.stopPropagation();">
                                <i class="fa fa-comment-o"></i>
                            </button>
                        </div>
                        
                        <div class="flex items-center p-2 hover:bg-neutral-50 rounded-md transition-all-300 cursor-pointer" onclick="openTeamDetailModal('DD测试团队', 'testing', '1004')">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://picsum.photos/id/1004/200/200" alt="团队列表" class="w-full h-full object-cover lazy-img" loading="lazy" data-loaded="false">
                            </div>
                            <div class="flex-1">
                                <h3 class="font-medium text-neutral-700">DD测试团队</h3>
                                <p class="text-xs text-neutral-500">测试</p>
                            </div>
                            <button class="text-neutral-400 hover:text-primary" onclick="event.stopPropagation();">
                                <i class="fa fa-comment-o"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 系统状态 -->
                <div class="bg-white rounded-lg shadow-card p-4 md:p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">我的系统</h2>
                        <a href="#system" class="text-primary text-sm hover:underline">更多</a>
                    </div>
                    <div class="space-y-4">
                        <!-- 系统状态项 -->
                        <div class="flex justify-between items-center cursor-pointer hover:bg-neutral-50 p-2 rounded transition-all-300" onclick="openSystemModal('core-banking')">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-success mr-2"></div>
                                <span class="text-sm text-neutral-700">核心银行系统</span>
                            </div>
                            <button class="text-xs text-success hover:text-success/80 px-3 py-1 border border-success rounded hover:bg-success/10 transition-all">进入</button>
                        </div>
                        
                        <div class="flex justify-between items-center cursor-pointer hover:bg-neutral-50 p-2 rounded transition-all-300" onclick="openSystemModal('online-banking')">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-success mr-2"></div>
                                <span class="text-sm text-neutral-700">网上银行系统</span>
                            </div>
                            <button class="text-xs text-success hover:text-success/80 px-3 py-1 border border-success rounded hover:bg-success/10 transition-all">进入</button>
                        </div>
                        
                        <div class="flex justify-between items-center cursor-pointer hover:bg-neutral-50 p-2 rounded transition-all-300" onclick="openSystemModal('mobile-banking')">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-warning mr-2"></div>
                                <span class="text-sm text-neutral-700">手机银行系统</span>
                            </div>
                            <button class="text-xs text-warning hover:text-warning/80 px-3 py-1 border border-warning rounded hover:bg-warning/10 transition-all">进入</button>
                        </div>
                        
                        <div class="flex justify-between items-center cursor-pointer hover:bg-neutral-50 p-2 rounded transition-all-300" onclick="openSystemModal('payment')">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-success mr-2"></div>
                                <span class="text-sm text-neutral-700">支付系统</span>
                            </div>
                            <button class="text-xs text-success hover:text-success/80 px-3 py-1 border border-success rounded hover:bg-success/10 transition-all">进入</button>
                        </div>
                        
                        <div class="flex justify-between items-center cursor-pointer hover:bg-neutral-50 p-2 rounded transition-all-300" onclick="openSystemModal('backup')">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-danger mr-2"></div>
                                <span class="text-sm text-neutral-700">数据备份服务</span>
                            </div>
                            <button class="text-xs text-danger hover:text-danger/80 px-3 py-1 border border-danger rounded hover:bg-danger/10 transition-all">进入</button>
                        </div>
                    </div>
                </div>
                
                <!-- 快速入口 -->
                <div class="bg-white rounded-lg shadow-card p-4 md:p-6">
                    <h2 class="text-lg font-bold text-neutral-700 mb-4">快速入口</h2>
                    <div class="grid grid-cols-3 gap-3">
                        <!-- 快速入口项 -->
                        <a href="#new-project" class="flex flex-col items-center justify-center p-3 bg-primary/5 rounded-lg hover:bg-primary/10 transition-all-300">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2">
                                <i class="fa fa-plus"></i>
                            </div>
                            <span class="text-xs text-neutral-700">新建需求</span>
                        </a>
                        
                        <a href="#calendar" class="flex flex-col items-center justify-center p-3 bg-secondary/5 rounded-lg hover:bg-secondary/10 transition-all-300">
                            <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mb-2">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <span class="text-xs text-neutral-700">日程安排</span>
                        </a>
                        
                        <a href="#documents" class="flex flex-col items-center justify-center p-3 bg-success/5 rounded-lg hover:bg-success/10 transition-all-300">
                            <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success mb-2">
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            <span class="text-xs text-neutral-700">文档中心</span>
                        </a>
                        
                        <a href="#reports" class="flex flex-col items-center justify-center p-3 bg-warning/5 rounded-lg hover:bg-warning/10 transition-all-300">
                            <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning mb-2">
                                <i class="fa fa-bar-chart"></i>
                            </div>
                            <span class="text-xs text-neutral-700">报表分析</span>
                        </a>
                        
                        <a href="#assets" class="flex flex-col items-center justify-center p-3 bg-danger/5 rounded-lg hover:bg-danger/10 transition-all-300">
                            <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger mb-2">
                                <i class="fa fa-database"></i>
                            </div>
                            <span class="text-xs text-neutral-700">资产库</span>
                        </a>
                        
                        <a href="#help" class="flex flex-col items-center justify-center p-3 bg-neutral-50 rounded-lg hover:bg-neutral-100 transition-all-300">
                            <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-600 mb-2">
                                <i class="fa fa-question-circle"></i>
                            </div>
                            <span class="text-xs text-neutral-700">帮助中心</span>
                        </a>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 懒加载图片优化
            const lazyImages = document.querySelectorAll('.lazy-img');
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.addEventListener('load', () => {
                            img.setAttribute('data-loaded', 'true');
                        });
                        observer.unobserve(img);
                    }
                });
            });
            
            lazyImages.forEach(img => {
                imageObserver.observe(img);
            });

            // 图表通用配置
            const commonChartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            usePointStyle: true,
                            padding: 15
                        }
                    }
                },
                animation: {
                    duration: 750
                }
            };

            // 图表1: 项目进度概览
            const progressCtx = document.getElementById('projectProgressChart');
            if (progressCtx) {
                const projectProgressChart = new Chart(progressCtx, {
                    type: 'line',
                    data: {
                        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        datasets: [
                            {
                                label: '计划完成',
                                data: [5, 8, 12, 15, 18, 20, 22],
                                borderColor: '#0066cc',
                                backgroundColor: 'rgba(0, 102, 204, 0.1)',
                                fill: true,
                                tension: 0.4,
                                borderWidth: 2,
                                pointRadius: 3,
                                pointBackgroundColor: '#0066cc'
                            },
                            {
                                label: '实际完成',
                                data: [3, 7, 10, 13, 16, 18, 20],
                                borderColor: '#009966',
                                backgroundColor: 'rgba(0, 153, 102, 0.1)',
                                fill: true,
                                tension: 0.4,
                                borderWidth: 2,
                                pointRadius: 3,
                                pointBackgroundColor: '#009966'
                            }
                        ]
                    },
                    options: {
                        ...commonChartOptions,
                        plugins: {
                            ...commonChartOptions.plugins,
                            legend: {
                                position: 'top',
                                labels: {
                                    usePointStyle: true,
                                    padding: 20
                                }
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }

            // 图表2: 流程阶段分布
            const distributionCtx = document.getElementById('processDistributionChart');
            if (distributionCtx) {
                const processDistributionChart = new Chart(distributionCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['业务战略', '业务建模', '需求', '设计', '排期', '开发', '测试', '投产'],
                        datasets: [
                            {
                                data: [5, 8, 12, 15, 10, 25, 15, 10],
                                backgroundColor: [
                                    '#0066cc',
                                    '#0099cc',
                                    '#009966',
                                    '#ff9900',
                                    '#6666ff',
                                    '#ff6666',
                                    '#ff66cc',
                                    '#66cc99'
                                ],
                                borderWidth: 0,
                                hoverOffset: 5
                            }
                        ]
                    },
                    options: {
                        ...commonChartOptions,
                        plugins: {
                            ...commonChartOptions.plugins,
                            legend: {
                                position: 'bottom',
                                labels: {
                                    usePointStyle: true,
                                    padding: 10,
                                    boxWidth: 6,
                                    font: {
                                        size: 10
                                    }
                                }
                            }
                        },
                        cutout: '70%'
                    }
                });
            }

            // 移动端菜单切换优化
            const menuToggle = document.getElementById('menuToggle');
            const sidebar = document.querySelector('aside');
            
            // 创建移动端菜单按钮
            if (!menuToggle && window.innerWidth < 768) {
                const mobileMenuBtn = document.createElement('button');
                mobileMenuBtn.id = 'mobileMenuBtn';
                mobileMenuBtn.className = 'fixed top-4 left-4 z-50 md:hidden bg-primary text-white p-2 rounded-md shadow-lg';
                mobileMenuBtn.innerHTML = '<i class="fa fa-bars"></i>';
                document.body.appendChild(mobileMenuBtn);
                
                mobileMenuBtn.addEventListener('click', function() {
                    if (sidebar) {
                        sidebar.classList.toggle('-translate-x-full');
                        const icon = this.querySelector('i');
                        if (sidebar.classList.contains('-translate-x-full')) {
                            icon.className = 'fa fa-bars';
                        } else {
                            icon.className = 'fa fa-times';
                        }
                    }
                });
            }

            // 任务项点击效果优化
            const taskItems = document.querySelectorAll('.border-neutral-200');
            taskItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    if (e.target.type !== 'checkbox') {
                        const checkbox = this.querySelector('input[type="checkbox"]');
                        if (checkbox) {
                            checkbox.checked = !checkbox.checked;
                            // 添加视觉反馈
                            if (checkbox.checked) {
                                this.classList.add('bg-primary/5', 'border-primary/30');
                            } else {
                                this.classList.remove('bg-primary/5', 'border-primary/30');
                            }
                        }
                    }
                });
            });

            // 平滑滚动优化
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        const headerHeight = 80;
                        const targetTop = targetElement.offsetTop - headerHeight;
                        window.scrollTo({
                            top: targetTop,
                            behavior: 'smooth'
                        });
                    }
                });
            });

            // 页面高级功能初始化
            initAdvancedFeatures();
        });

        // 高级功能初始化函数
        function initAdvancedFeatures() {
            // 单页应用切换功能
            const menuLinks = {
                'home-link': 'main-content',
                'business-strategy-link': 'business-strategy-content',
                'architecture-management-link': 'architecture-management-content'
            };

            // 绑定菜单点击事件
            for (const [linkId, contentId] of Object.entries(menuLinks)) {
                const link = document.getElementById(linkId);
                if (link) {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        // 切换链接样式
                        for (const l of Object.keys(menuLinks)) {
                            const menuLink = document.getElementById(l);
                            if (menuLink) {
                                menuLink.className = 'flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300';
                            }
                        }
                        this.className = 'flex items-center space-x-3 px-4 py-3 text-primary bg-primary/5 border-r-4 border-primary';

                        // 切换内容显示
                        for (const content of Object.values(menuLinks)) {
                            const contentElement = document.getElementById(content);
                            if (contentElement) {
                                contentElement.classList.add('hidden');
                            }
                        }
                        const activeContent = document.getElementById(contentId);
                        if (activeContent) {
                            activeContent.classList.remove('hidden');
                        }
                    });
                }
            }

            // 业务战略展开/折叠功能
            const expandBtns = document.querySelectorAll('.expand-btn');
            expandBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const target = this.getAttribute('data-target');
                    const targetRows = document.querySelectorAll(`.${target}`);
                    
                    // 切换图标
                    const icon = this.querySelector('i');
                    if (icon && icon.classList.contains('fa-chevron-down')) {
                        icon.classList.replace('fa-chevron-down', 'fa-chevron-right');
                        targetRows.forEach(row => row.classList.add('hidden'));
                    } else if (icon) {
                        icon.classList.replace('fa-chevron-right', 'fa-chevron-down');
                        targetRows.forEach(row => row.classList.remove('hidden'));
                    }
                });
            });

            // 设计管理菜单展开/收起功能
            const designMenuToggle = document.getElementById('design-menu-toggle');
            const designSubmenu = document.getElementById('design-submenu');
            
            if (designMenuToggle && designSubmenu) {
                designMenuToggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const icon = this.querySelector('i');
                    const isExpanded = !designSubmenu.classList.contains('hidden');
                    
                    if (isExpanded) {
                        // 收起子菜单
                        designSubmenu.classList.add('hidden');
                        icon.classList.remove('rotate-90');
                    } else {
                        // 展开子菜单
                        designSubmenu.classList.remove('hidden');
                        icon.classList.add('rotate-90');
                    }
                });
            }

            // 测试管理菜单展开/收起功能
            const testMenuToggle = document.getElementById('test-menu-toggle');
            const testSubmenu = document.getElementById('test-submenu');
            
            if (testMenuToggle && testSubmenu) {
                testMenuToggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const icon = this.querySelector('i');
                    const isExpanded = !testSubmenu.classList.contains('hidden');
                    
                    if (isExpanded) {
                        // 收起子菜单
                        testSubmenu.classList.add('hidden');
                        icon.classList.remove('rotate-90');
                    } else {
                        // 展开子菜单
                        testSubmenu.classList.remove('hidden');
                        icon.classList.add('rotate-90');
                    }
                });
            }

            // 架构管理二级菜单切换功能
            const archButtons = {
                'arch-business-btn': 'business-architecture-content',
                'arch-data-btn': 'data-architecture-content',
                'arch-app-btn': 'application-architecture-content',
                'arch-tech-btn': 'technology-architecture-content',
                'arch-security-btn': 'security-architecture-content'
            };

            // 绑定架构类型切换事件
            for (const [buttonId, contentId] of Object.entries(archButtons)) {
                const button = document.getElementById(buttonId);
                if (button) {
                    button.addEventListener('click', function() {
                        // 切换按钮样式
                        for (const btn of Object.keys(archButtons)) {
                            const archBtn = document.getElementById(btn);
                            if (archBtn) {
                                archBtn.className = 'whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium flex items-center hover:bg-neutral-50 transition-all-300';
                            }
                        }
                        this.className = 'whitespace-nowrap px-4 py-2 rounded-md bg-primary text-white font-medium flex items-center transition-all-300';

                        // 切换内容显示
                        for (const content of Object.values(archButtons)) {
                            const archContent = document.getElementById(content);
                            if (archContent) {
                                archContent.classList.add('hidden');
                            }
                        }
                        const activeArchContent = document.getElementById(contentId);
                        if (activeArchContent) {
                            activeArchContent.classList.remove('hidden');
                        }
                    });
                }
            }

            // ========== 待办任务分页功能 ==========
            
            // 任务数据（从l4_task.csv筛选出的IPDO任务）
            const todoTasks = [
                {
                    id: 'T001',
                    title: '需求管理流程优化',
                    phase: '战略解析',
                    type: 'IPDO任务',
                    priority: 'high',
                    status: 'pending',
                    dueDate: '2024-12-20',
                    assignee: '王明',
                    description: '建立端到端需求管理流程体系'
                },
                {
                    id: 'T002',
                    title: '解决方案架构设计',
                    phase: '解决方案设计',
                    type: 'IPDO任务',
                    priority: 'high',
                    status: 'in-progress',
                    dueDate: '2024-12-25',
                    assignee: '李华',
                    description: '设计业务架构解决方案'
                },
                {
                    id: 'T003',
                    title: '应用系统架构规划',
                    phase: '应用分析设计',
                    type: 'IPDO任务',
                    priority: 'medium',
                    status: 'pending',
                    dueDate: '2025-01-10',
                    assignee: '张伟',
                    description: '规划应用系统整体架构'
                },
                {
                    id: 'T004',
                    title: '数据模型设计',
                    phase: '应用分析设计',
                    type: 'IPDO任务',
                    priority: 'high',
                    status: 'pending',
                    dueDate: '2025-01-15',
                    assignee: '刘强',
                    description: '设计核心数据模型'
                },
                {
                    id: 'T005',
                    title: '技术平台选型',
                    phase: '解决方案设计',
                    type: 'IPDO任务',
                    priority: 'medium',
                    status: 'pending',
                    dueDate: '2025-01-20',
                    assignee: '陈静',
                    description: '评估和选择技术平台'
                },
                {
                    id: 'T006',
                    title: '业务流程建模',
                    phase: '战略解析',
                    type: 'IPDO任务',
                    priority: 'high',
                    status: 'in-progress',
                    dueDate: '2024-12-30',
                    assignee: '王明',
                    description: '建立业务流程模型'
                },
                {
                    id: 'T007',
                    title: '接口规范制定',
                    phase: '应用分析设计',
                    type: 'IPDO任务',
                    priority: 'medium',
                    status: 'pending',
                    dueDate: '2025-02-01',
                    assignee: '赵敏',
                    description: '制定系统接口规范'
                },
                {
                    id: 'T008',
                    title: '安全架构设计',
                    phase: '解决方案设计',
                    type: 'IPDO任务',
                    priority: 'high',
                    status: 'pending',
                    dueDate: '2025-02-05',
                    assignee: '李华',
                    description: '设计安全架构体系'
                },
                {
                    id: 'T009',
                    title: '能力需求分析',
                    phase: '战略解析',
                    type: 'IPDO任务',
                    priority: 'high',
                    status: 'completed',
                    dueDate: '2024-12-10',
                    assignee: '张伟',
                    description: '分析战略能力需求'
                },
                {
                    id: 'T010',
                    title: '微服务拆分设计',
                    phase: '应用分析设计',
                    type: 'IPDO任务',
                    priority: 'medium',
                    status: 'pending',
                    dueDate: '2025-02-15',
                    assignee: '刘强',
                    description: '设计微服务拆分方案'
                },
                {
                    id: 'T011',
                    title: 'DevOps流程建立',
                    phase: '解决方案设计',
                    type: 'IPDO任务',
                    priority: 'medium',
                    status: 'pending',
                    dueDate: '2025-02-20',
                    assignee: '陈静',
                    description: '建立DevOps持续交付流程'
                },
                {
                    id: 'T012',
                    title: '组织能力评估',
                    phase: '战略解析',
                    type: 'IPDO任务',
                    priority: 'high',
                    status: 'in-progress',
                    dueDate: '2025-01-05',
                    assignee: '王明',
                    description: '评估组织当前能力水平'
                }
            ];

            // 分页配置
            let currentPage = 1;
            const tasksPerPage = 5;
            const totalPages = Math.ceil(todoTasks.length / tasksPerPage);

            // 获取优先级标签样式
            function getPriorityBadge(priority) {
                const badges = {
                    'high': '<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-600"><i class="fa fa-exclamation-circle mr-1"></i>高</span>',
                    'medium': '<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-600"><i class="fa fa-flag mr-1"></i>中</span>',
                    'low': '<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-600"><i class="fa fa-info-circle mr-1"></i>低</span>'
                };
                return badges[priority] || badges['medium'];
            }

            // 获取状态标签样式
            function getStatusBadge(status) {
                const badges = {
                    'pending': '<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600"><i class="fa fa-clock-o mr-1"></i>待处理</span>',
                    'in-progress': '<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-600"><i class="fa fa-spinner mr-1"></i>进行中</span>',
                    'completed': '<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-600"><i class="fa fa-check-circle mr-1"></i>已完成</span>'
                };
                return badges[status] || badges['pending'];
            }

            // 获取阶段图标和颜色
            function getPhaseInfo(phase) {
                const phases = {
                    '战略解析': { icon: 'fa-lightbulb-o', color: 'text-purple-600', bg: 'bg-purple-50' },
                    '解决方案设计': { icon: 'fa-puzzle-piece', color: 'text-blue-600', bg: 'bg-blue-50' },
                    '应用分析设计': { icon: 'fa-cube', color: 'text-green-600', bg: 'bg-green-50' },
                    '开发构建': { icon: 'fa-code', color: 'text-orange-600', bg: 'bg-orange-50' },
                    '测试部署': { icon: 'fa-rocket', color: 'text-red-600', bg: 'bg-red-50' }
                };
                return phases[phase] || { icon: 'fa-tasks', color: 'text-gray-600', bg: 'bg-gray-50' };
            }

            // 渲染任务列表（表格形式）
            function renderTasks() {
                const container = document.getElementById('taskListContainer');
                if (!container) {
                    console.error('taskListContainer 元素未找到');
                    return;
                }
                
                const startIndex = (currentPage - 1) * tasksPerPage;
                const endIndex = Math.min(startIndex + tasksPerPage, todoTasks.length);
                const currentTasks = todoTasks.slice(startIndex, endIndex);

                container.innerHTML = currentTasks.map(task => {
                    const phaseInfo = getPhaseInfo(task.phase);
                    return `
                        <tr class="hover:bg-neutral-50 cursor-pointer transition-colors" onclick="navigateToKanban('${task.id}')">
                            <td class="px-3 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-neutral-900">${task.title}</div>
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap">
                                <div class="text-sm text-neutral-600">${task.id}</div>
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap">
                                <span class="${phaseInfo.bg} ${phaseInfo.color} px-2 py-1 rounded-md text-xs font-medium">
                                    <i class="fa ${phaseInfo.icon} mr-1"></i>${task.phase}
                                </span>
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs rounded-md bg-blue-50 text-blue-600">
                                    <i class="fa fa-tasks mr-1"></i>${task.type}
                                </span>
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap">
                                <div class="text-sm text-neutral-600">
                                    <i class="fa fa-calendar-o mr-1"></i>${task.dueDate}
                                </div>
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap">
                                <div class="text-sm text-neutral-600">
                                    <i class="fa fa-user-o mr-1"></i>${task.assignee}
                                </div>
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap">
                                ${getPriorityBadge(task.priority)}
                            </td>
                        </tr>
                    `;
                }).join('');

                // 更新分页信息
                const totalTasksElem = document.getElementById('totalTasks');
                const pageStartElem = document.getElementById('pageStart');
                const pageEndElem = document.getElementById('pageEnd');
                
                if (totalTasksElem) totalTasksElem.textContent = todoTasks.length;
                if (pageStartElem) pageStartElem.textContent = startIndex + 1;
                if (pageEndElem) pageEndElem.textContent = endIndex;

                // 更新页码按钮
                renderPagination();
            }

            // 渲染分页按钮
            function renderPagination() {
                const pageNumbersContainer = document.getElementById('pageNumbers');
                const prevBtn = document.getElementById('prevPageBtn');
                const nextBtn = document.getElementById('nextPageBtn');

                if (!pageNumbersContainer || !prevBtn || !nextBtn) {
                    console.error('分页元素未找到');
                    return;
                }

                // 更新上一页/下一页按钮状态
                prevBtn.disabled = currentPage === 1;
                prevBtn.className = currentPage === 1 
                    ? 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300 disabled:opacity-50 disabled:cursor-not-allowed'
                    : 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300';

                nextBtn.disabled = currentPage === totalPages;
                nextBtn.className = currentPage === totalPages
                    ? 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300 disabled:opacity-50 disabled:cursor-not-allowed'
                    : 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300';

                // 生成页码按钮
                let pageButtons = '';
                for (let i = 1; i <= totalPages; i++) {
                    if (i === currentPage) {
                        pageButtons += `<button class="px-3 py-1 text-sm rounded bg-primary text-white font-semibold">${i}</button>`;
                    } else {
                        pageButtons += `<button class="px-3 py-1 text-sm rounded hover:bg-neutral-100 transition-colors" onclick="goToPage(${i})">${i}</button>`;
                    }
                }
                pageNumbersContainer.innerHTML = pageButtons;
            }

            // 切换页面
            window.changePage = function(direction) {
                const newPage = currentPage + direction;
                if (newPage >= 1 && newPage <= totalPages) {
                    currentPage = newPage;
                    renderTasks();
                }
            };

            // 跳转到指定页面
            window.goToPage = function(page) {
                currentPage = page;
                renderTasks();
            };

            // 跳转到看板页面
            window.navigateToKanban = function(taskId) {
                // 将任务ID存储到sessionStorage，以便在看板页面使用
                if (taskId) {
                    sessionStorage.setItem('selectedTaskId', taskId);
                }
                // 跳转到需求看板页面
                window.location.href = 'devops_platform_kanban.html';
            };

            // 查看任务详情（备用函数）
            window.viewTaskDetail = function(taskId) {
                const task = todoTasks.find(t => t.id === taskId);
                if (task) {
                    alert(`任务详情:

任务ID: ${task.id}
标题: ${task.title}
阶段: ${task.phase}
优先级: ${task.priority}
状态: ${task.status}
截止日期: ${task.dueDate}
负责人: ${task.assignee}
描述: ${task.description}`);
                    // 这里可以改为打开模态对话框显示详情
                }
            };

            // 初始化任务列表
            console.log('初始化待办任务列表...');
            renderTasks();
            
            // ========== 批量创建任务弹窗功能 ==========
            
            const createTaskBtn = document.getElementById('create-task-btn');
            const batchTaskModal = document.getElementById('batch-task-modal');
            const closeBatchModal = document.getElementById('close-batch-modal');
            const batchCancelBtn = document.getElementById('batch-cancel-btn');
            const batchSubmitBtn = document.getElementById('batch-submit-btn');
            const modalOverlay = document.getElementById('modal-overlay');
            const processTypeRadios = document.querySelectorAll('.process-type-radio');
            const phasesContainer = document.getElementById('phases-container');
            
            // 阶段折叠/展开功能
            window.togglePhase = function(phaseId) {
                const phaseContent = document.getElementById(phaseId);
                const phaseIcon = document.getElementById(phaseId + '-icon');
                
                if (phaseContent && phaseIcon) {
                    if (phaseContent.classList.contains('hidden')) {
                        phaseContent.classList.remove('hidden');
                        phaseIcon.classList.add('fa-chevron-down');
                        phaseIcon.classList.remove('fa-chevron-right');
                    } else {
                        phaseContent.classList.add('hidden');
                        phaseIcon.classList.add('fa-chevron-right');
                        phaseIcon.classList.remove('fa-chevron-down');
                    }
                }
            };
            
            // 定义不同工艺的阶段配置
            const processPhases = {
                enterprise: [
                    { id: 'phase-strategy', name: '战略解析', color: 'indigo', count: 4, tasks: [
                        { name: '战略目标分析', assignee: '张三', priority: 'high' },
                        { name: '业务能力评估', assignee: '李四', priority: 'high' },
                        { name: '业务价值链分析', assignee: '王五', priority: 'medium' },
                        { name: '业务架构现状评估', assignee: '赵六', priority: 'medium' }
                    ]},
                    { id: 'phase-solution', name: '解决方案设计', color: 'blue', count: 4, tasks: [
                        { name: '总体分析任务', assignee: '张三', priority: 'high' },
                        { name: '业务架构设计', assignee: '李四', priority: 'high' },
                        { name: '数据架构设计', assignee: '王五', priority: 'medium' },
                        { name: '技术架构设计', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-application', name: '应用设计', color: 'green', count: 3, tasks: [
                        { name: '应用架构设计', assignee: '赵六', priority: 'high' },
                        { name: '安全架构设计', assignee: '张三', priority: 'high' },
                        { name: '原型界面设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-coding', name: '编码开发', color: 'purple', count: 5, tasks: [
                        { name: '数据库表设计', assignee: '赵六', priority: 'high' },
                        { name: '后端接口开发', assignee: '张三', priority: 'high' },
                        { name: '前端页面开发', assignee: '王五', priority: 'medium' },
                        { name: '业务逻辑实现', assignee: '赵六', priority: 'medium' },
                        { name: '接口联调测试', assignee: '张三', priority: 'medium' }
                    ]},
                    { id: 'phase-testing', name: '测试验证', color: 'orange', count: 4, tasks: [
                        { name: '单元测试编写', assignee: '李四', priority: 'high' },
                        { name: '集成测试执行', assignee: '赵六', priority: 'high' },
                        { name: '性能测试', assignee: '王五', priority: 'medium' },
                        { name: '用户验收测试', assignee: '张三', priority: 'medium' }
                    ]},
                    { id: 'phase-deploy', name: '投产', color: 'red', count: 3, tasks: [
                        { name: '部署准备', assignee: '王五', priority: 'high' },
                        { name: '系统上线', assignee: '赵六', priority: 'high' },
                        { name: '上线验证', assignee: '张三', priority: 'medium' }
                    ]}
                ],
                galaxy: [
                    { id: 'phase-requirement', name: '需求分析', color: 'indigo', count: 3, tasks: [
                        { name: '需求调研与收集', assignee: '张三', priority: 'high' },
                        { name: '需求分析与评审', assignee: '李四', priority: 'high' },
                        { name: '需求规格编写', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-app-analysis', name: '应用分析', color: 'cyan', count: 4, tasks: [
                        { name: '业务流程分析', assignee: '赵六', priority: 'high' },
                        { name: '功能模块划分', assignee: '张三', priority: 'high' },
                        { name: '数据模型设计', assignee: '李四', priority: 'medium' },
                        { name: '接口设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-design', name: '概设详设', color: 'teal', count: 4, tasks: [
                        { name: '概要设计文档', assignee: '赵六', priority: 'high' },
                        { name: '详细设计文档', assignee: '张三', priority: 'high' },
                        { name: '数据库设计', assignee: '李四', priority: 'medium' },
                        { name: '界面原型设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-development', name: '开发', color: 'purple', count: 4, tasks: [
                        { name: '后端代码开发', assignee: '赵六', priority: 'high' },
                        { name: '前端代码开发', assignee: '张三', priority: 'high' },
                        { name: '数据库脚本开发', assignee: '李四', priority: 'medium' },
                        { name: '代码审查', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-test', name: '测试', color: 'orange', count: 3, tasks: [
                        { name: '单元测试', assignee: '赵六', priority: 'high' },
                        { name: '集成测试', assignee: '张三', priority: 'high' },
                        { name: '系统测试', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-prod', name: '投产', color: 'red', count: 3, tasks: [
                        { name: '生产环境部署', assignee: '王五', priority: 'high' },
                        { name: '数据迁移', assignee: '赵六', priority: 'high' },
                        { name: '上线验证', assignee: '张三', priority: 'medium' }
                    ]}
                ],
                traditional: [
                    { id: 'phase-requirement-trad', name: '需求分析', color: 'indigo', count: 3, tasks: [
                        { name: '需求调研', assignee: '张三', priority: 'high' },
                        { name: '需求分析', assignee: '李四', priority: 'high' },
                        { name: '需求文档编写', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-design-trad', name: '概设详设', color: 'teal', count: 4, tasks: [
                        { name: '系统概要设计', assignee: '赵六', priority: 'high' },
                        { name: '系统详细设计', assignee: '张三', priority: 'high' },
                        { name: '数据库设计', assignee: '李四', priority: 'medium' },
                        { name: 'UI设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-dev-trad', name: '开发', color: 'purple', count: 4, tasks: [
                        { name: '编码实现', assignee: '赵六', priority: 'high' },
                        { name: '单元测试', assignee: '张三', priority: 'high' },
                        { name: '代码审查', assignee: '李四', priority: 'medium' },
                        { name: '文档编写', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-test-trad', name: '测试', color: 'orange', count: 3, tasks: [
                        { name: '功能测试', assignee: '赵六', priority: 'high' },
                        { name: '集成测试', assignee: '张三', priority: 'high' },
                        { name: '验收测试', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-deploy-trad', name: '投产', color: 'red', count: 3, tasks: [
                        { name: '部署准备', assignee: '王五', priority: 'high' },
                        { name: '系统上线', assignee: '赵六', priority: 'high' },
                        { name: '上线验证', assignee: '张三', priority: 'medium' }
                    ]}
                ]
            };
            
            // 生成阶段HTML
            function generatePhasesHTML(phases) {
                return phases.map((phase, index) => `
                    <div class="mb-3 border border-gray-200 rounded-lg overflow-hidden">
                        <div class="bg-gradient-to-r from-${phase.color}-50 to-${phase.color}-100 px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-${phase.color}-100 transition-colors" onclick="togglePhase('${phase.id}')">
                            <div class="flex items-center space-x-3">
                                <i class="fa fa-chevron-right text-${phase.color}-600 transition-transform duration-200" id="${phase.id}-icon"></i>
                                <h3 class="font-semibold text-gray-800">${index + 1}. ${phase.name}</h3>
                                <span class="bg-${phase.color}-500 text-white text-xs px-2 py-1 rounded-full">${phase.count}个任务</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <input type="checkbox" class="phase-select-all rounded text-primary focus:ring-primary" data-phase="${phase.id}" onclick="event.stopPropagation()">
                                <span class="text-xs text-gray-600">全选</span>
                            </div>
                        </div>
                        <div id="${phase.id}" class="hidden">
                            <table class="min-w-full bg-white">
                                <thead class="bg-gray-50 text-gray-600 text-xs leading-normal">
                                    <tr>
                                        <th class="px-3 py-2 text-left w-12"><i class="fa fa-check-square-o text-gray-400"></i></th>
                                        <th class="px-3 py-2 text-left">任务名称</th>
                                        <th class="px-3 py-2 text-left">默认负责人</th>
                                        <th class="px-3 py-2 text-left">优先级</th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm">
                                    ${phase.tasks.map((task, taskIndex) => `
                                        <tr class="${taskIndex < phase.tasks.length - 1 ? 'border-b border-gray-100' : ''} hover:bg-gray-50">
                                            <td class="px-3 py-3">
                                                <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="${phase.id}">
                                            </td>
                                            <td class="px-3 py-3 task-name">${task.name}</td>
                                            <td class="px-3 py-3">
                                                <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                    <option value="${task.assignee}">${task.assignee}</option>
                                                    <option value="张三">张三</option>
                                                    <option value="李四">李四</option>
                                                    <option value="王五">王五</option>
                                                    <option value="赵六">赵六</option>
                                                </select>
                                            </td>
                                            <td class="px-3 py-3"><span class="badge-priority-${task.priority}">${task.priority === 'high' ? '高' : task.priority === 'medium' ? '中' : '低'}</span></td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    </div>
                `).join('');
            }
            
            // 切换工艺任务
            function switchProcessType(type) {
                const phases = processPhases[type];
                if (phasesContainer && phases) {
                    phasesContainer.innerHTML = generatePhasesHTML(phases);
                    bindPhaseSelectAllEvents();
                }
            }
            
            // 绑定阶段全选事件
            function bindPhaseSelectAllEvents() {
                const phaseSelectAllCheckboxes = document.querySelectorAll('.phase-select-all');
                phaseSelectAllCheckboxes.forEach(phaseCheckbox => {
                    phaseCheckbox.addEventListener('change', function(e) {
                        e.stopPropagation();
                        const phaseId = this.getAttribute('data-phase');
                        const phaseTaskCheckboxes = document.querySelectorAll(`.task-checkbox[data-phase="${phaseId}"]`);
                        phaseTaskCheckboxes.forEach(checkbox => {
                            checkbox.checked = this.checked;
                        });
                    });
                });
            }
            
            // 显示弹窗
            function showBatchTaskModal() {
                if (batchTaskModal && modalOverlay) {
                    batchTaskModal.classList.remove('hidden');
                    modalOverlay.classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                }
            }
            
            // 隐藏弹窗
            function hideBatchTaskModal() {
                if (batchTaskModal && modalOverlay) {
                    batchTaskModal.classList.add('hidden');
                    modalOverlay.classList.add('hidden');
                    document.body.style.overflow = 'auto';
                }
            }
            
            // 监听工艺任务切换
            processTypeRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.checked) {
                        switchProcessType(this.value);
                    }
                });
            });
            
            // 标签页切换功能
            const presetTab = document.getElementById('preset-tab');
            const customTab = document.getElementById('custom-tab');
            const presetContent = document.getElementById('preset-content');
            const customContent = document.getElementById('custom-content');
            const submitButton = document.getElementById('batch-submit-btn');
            const submitText = document.getElementById('submit-text');
            
            if (presetTab && customTab) {
                presetTab.addEventListener('click', function() {
                    // 切换标签页样式
                    presetTab.classList.add('active', 'border-primary', 'text-primary');
                    presetTab.classList.remove('border-transparent', 'text-gray-600');
                    customTab.classList.remove('active', 'border-primary', 'text-primary');
                    customTab.classList.add('border-transparent', 'text-gray-600');
                    
                    // 切换内容显示
                    presetContent.classList.remove('hidden');
                    customContent.classList.add('hidden');
                    
                    // 更新提交按钮文本
                    submitText.textContent = '批量创建任务';
                });
                
                customTab.addEventListener('click', function() {
                    // 切换标签页样式
                    customTab.classList.add('active', 'border-primary', 'text-primary');
                    customTab.classList.remove('border-transparent', 'text-gray-600');
                    presetTab.classList.remove('active', 'border-primary', 'text-primary');
                    presetTab.classList.add('border-transparent', 'text-gray-600');
                    
                    // 切换内容显示
                    customContent.classList.remove('hidden');
                    presetContent.classList.add('hidden');
                    
                    // 更新提交按钮文本
                    submitText.textContent = '创建任务';
                });
            }
            
            // 创建任务按钮点击事件
            if (createTaskBtn) {
                createTaskBtn.addEventListener('click', showBatchTaskModal);
            }
            
            // 关闭按钮点击事件
            if (closeBatchModal) {
                closeBatchModal.addEventListener('click', hideBatchTaskModal);
            }
            
            if (batchCancelBtn) {
                batchCancelBtn.addEventListener('click', hideBatchTaskModal);
            }
            
            // 遮罩层点击事件
            if (modalOverlay) {
                modalOverlay.addEventListener('click', function(e) {
                    if (e.target === this) {
                        hideBatchTaskModal();
                    }
                });
            }
            
            // ESC键关闭弹窗
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && batchTaskModal && !batchTaskModal.classList.contains('hidden')) {
                    hideBatchTaskModal();
                }
            });
            
            // 提交按钮点击事件（处理预置任务和自定义任务）
            if (batchSubmitBtn) {
                batchSubmitBtn.addEventListener('click', function() {
                    // 判断当前是哪个标签页
                    if (!customContent.classList.contains('hidden')) {
                        // 自定义任务提交
                        const taskName = document.getElementById('task-name').value;
                        const taskDescription = document.getElementById('task-description').value;
                        const taskPhase = document.getElementById('task-phase').value;
                        const taskAssignee = document.getElementById('task-assignee').value;
                        const taskPriority = document.getElementById('task-priority').value;
                        const taskDeadline = document.getElementById('task-deadline').value;
                        const taskType = document.getElementById('task-type').value;
                        
                        // 验证必填字段
                        if (!taskName || !taskPhase || !taskAssignee) {
                            alert('请填写必填字段：任务名称、任务阶段、负责人');
                            return;
                        }
                        
                        // 创建任务对象
                        const newTask = {
                            name: taskName,
                            description: taskDescription,
                            phase: taskPhase,
                            assignee: taskAssignee,
                            priority: taskPriority,
                            deadline: taskDeadline,
                            type: taskType,
                            id: 'TASK-' + Date.now(),
                            status: '未开始'
                        };
                        
                        console.log('创建自定义任务:', newTask);
                        alert(`已成功创建任务：${taskName}`);
                        
                        // 清空表单
                        document.getElementById('custom-task-form').reset();
                        
                        // 关闭弹窗
                        hideBatchTaskModal();
                    } else {
                        // 预置任务批量创建
                        const selectedTasks = [];
                        const taskCheckboxes = document.querySelectorAll('.task-checkbox');
                        taskCheckboxes.forEach(checkbox => {
                            if (checkbox.checked) {
                                const taskRow = checkbox.closest('tr');
                                const taskName = taskRow.querySelector('.task-name').textContent;
                                const taskOwner = taskRow.querySelector('select').value;
                                const priorityBadge = taskRow.querySelector('[class*="badge-priority"]');
                                const priority = priorityBadge ? priorityBadge.textContent : '中';
                                const phaseId = checkbox.getAttribute('data-phase');
                                
                                selectedTasks.push({ 
                                    name: taskName, 
                                    owner: taskOwner, 
                                    priority: priority,
                                    phase: phaseId
                                });
                            }
                        });
                        
                        if (selectedTasks.length === 0) {
                            alert('请至少选择一个任务！');
                            return;
                        }
                        
                        console.log('批量创建任务:', selectedTasks);
                        alert(`已选择创建 ${selectedTasks.length} 个任务`);
                        
                        // 关闭弹窗
                        hideBatchTaskModal();
                    }
                });
            }
            
            // 初始化默认工艺任务（企架工艺）
            switchProcessType('enterprise');
        }
    </script>
        <!-- 业务战略内容 (默认隐藏) -->
        <div id="business-strategy-content" class="hidden">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h1 class="text-xl font-bold text-neutral-800">业务战略</h1>
                    <div class="text-sm text-neutral-500 mt-1">
                        <span>首页</span> &gt; <span>业务战略</span>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <button class="px-4 py-2 bg-white border border-neutral-200 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300 flex items-center">
                        <i class="fa fa-download mr-2"></i> 导出
                    </button>
                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center">
                        <i class="fa fa-plus mr-2"></i> 新建
                    </button>
                </div>
            </div>

            <!-- 搜索和筛选区域 -->
            <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div class="flex items-center flex-1">
                        <div class="relative flex-1 max-w-md">
                            <input type="text" placeholder="搜索业务战略、业务举措或能力需求..." class="w-full pl-10 pr-4 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all-300">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                        </div>
                    </div>
                    <div class="flex items-center space-x-3">
                        <select class="px-3 py-2 border border-neutral-200 rounded-md text-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all-300 bg-white">
                            <option value="">全部状态</option>
                            <option value="planning">规划中</option>
                            <option value="implementing">实施中</option>
                            <option value="completed">已完成</option>
                        </select>
                        <button class="px-4 py-2 bg-white border border-neutral-200 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300 flex items-center">
                            <i class="fa fa-filter mr-2"></i> 筛选
                        </button>
                    </div>
                </div>
            </div>

            <!-- 业务战略三级级联表 -->
            <div class="bg-white rounded-lg shadow-card overflow-hidden">
                <table class="min-w-full divide-y divide-neutral-200">
                    <thead class="bg-neutral-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                名称
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                编号
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                负责人
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                状态
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                截止日期
                            </th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-neutral-200">
                        <!-- 业务战略 -->
                        <tr class="bg-primary/5 hover:bg-primary/10 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <button class="expand-btn mr-2 text-neutral-500 focus:outline-none" data-target="strategy-1">
                                        <i class="fa fa-chevron-down"></i>
                                    </button>
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/20 text-primary rounded">战略</span>
                                    <span class="ml-2 font-medium text-neutral-800">数字化转型战略</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                STR-2023-001
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                        <span class="text-sm font-medium">张</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">张三</div>
                                        <div class="text-xs text-neutral-500">CTO</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                                    实施中
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2024-12-31
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>

                        <!-- 业务举措 -->
                        <tr class="strategy-1 bg-neutral-50 hover:bg-neutral-100 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <button class="expand-btn mr-2 text-neutral-500 focus:outline-none" data-target="initiative-1-1">
                                        <i class="fa fa-chevron-down"></i>
                                    </button>
                                    <span class="pl-4"></span>
                                    <span class="px-2 py-1 text-xs font-medium bg-secondary/20 text-secondary rounded">举措</span>
                                    <span class="ml-2 text-neutral-700">移动银行平台升级</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                INI-2023-001-001
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                                        <span class="text-sm font-medium">李</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">李四</div>
                                        <div class="text-xs text-neutral-500">产品经理</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                                    实施中
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2024-06-30
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>

                        <!-- 能力需求 -->
                        <tr class="initiative-1-1 hover:bg-neutral-50 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="pl-8"></span>
                                    <span class="px-2 py-1 text-xs font-medium bg-success/20 text-success rounded">需求</span>
                                    <span class="ml-2 text-neutral-600">移动支付安全增强</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                REQ-2023-001-001-001
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-success/10 flex items-center justify-center text-success">
                                        <span class="text-sm font-medium">王</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">王五</div>
                                        <div class="text-xs text-neutral-500">安全架构师</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-success/10 text-success">
                                    已完成
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2024-03-31
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>

                        <tr class="initiative-1-1 hover:bg-neutral-50 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="pl-8"></span>
                                    <span class="px-2 py-1 text-xs font-medium bg-success/20 text-success rounded">需求</span>
                                    <span class="ml-2 text-neutral-600">用户体验优化</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                REQ-2023-001-001-002
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-success/10 flex items-center justify-center text-success">
                                        <span class="text-sm font-medium">赵</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">赵六</div>
                                        <div class="text-xs text-neutral-500">UI/UX设计师</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                                    实施中
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2024-05-31
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>

                        <!-- 业务举措 -->
                        <tr class="strategy-1 bg-neutral-50 hover:bg-neutral-100 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <button class="expand-btn mr-2 text-neutral-500 focus:outline-none" data-target="initiative-1-2">
                                        <i class="fa fa-chevron-down"></i>
                                    </button>
                                    <span class="pl-4"></span>
                                    <span class="px-2 py-1 text-xs font-medium bg-secondary/20 text-secondary rounded">举措</span>
                                    <span class="ml-2 text-neutral-700">智能风控系统建设</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                INI-2023-001-002
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                                        <span class="text-sm font-medium">孙</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">孙七</div>
                                        <div class="text-xs text-neutral-500">风控总监</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                                    实施中
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2024-08-31
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>

                        <!-- 能力需求 -->
                        <tr class="initiative-1-2 hover:bg-neutral-50 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="pl-8"></span>
                                    <span class="px-2 py-1 text-xs font-medium bg-success/20 text-success rounded">需求</span>
                                    <span class="ml-2 text-neutral-600">机器学习模型开发</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                REQ-2023-001-002-001
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-success/10 flex items-center justify-center text-success">
                                        <span class="text-sm font-medium">周</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">周八</div>
                                        <div class="text-xs text-neutral-500">数据科学家</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                                    实施中
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2024-07-31
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>

                        <!-- 业务战略 -->
                        <tr class="bg-primary/5 hover:bg-primary/10 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <button class="expand-btn mr-2 text-neutral-500 focus:outline-none" data-target="strategy-2">
                                        <i class="fa fa-chevron-down"></i>
                                    </button>
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/20 text-primary rounded">战略</span>
                                    <span class="ml-2 font-medium text-neutral-800">绿色金融发展战略</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                STR-2023-002
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                        <span class="text-sm font-medium">吴</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">吴九</div>
                                        <div class="text-xs text-neutral-500">副总裁</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-info/10 text-info">
                                    规划中
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2025-03-31
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>

                        <!-- 业务举措 -->
                        <tr class="strategy-2 bg-neutral-50 hover:bg-neutral-100 transition-all-300">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="pl-4"></span>
                                    <span class="px-2 py-1 text-xs font-medium bg-secondary/20 text-secondary rounded">举措</span>
                                    <span class="ml-2 text-neutral-700">绿色信贷产品创新</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                INI-2023-002-001
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                                        <span class="text-sm font-medium">郑</span>
                                    </div>
                                    <div class="ml-2">
                                        <div class="text-sm font-medium text-neutral-700">郑十</div>
                                        <div class="text-xs text-neutral-500">产品经理</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-info/10 text-info">
                                    规划中
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                2024-10-31
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">
                                    <i class="fa fa-edit"></i> 编辑
                                </button>
                                <button class="text-neutral-500 hover:text-neutral-700">
                                    <i class="fa fa-eye"></i> 查看
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="mt-6 flex justify-between items-center">
                <div class="text-sm text-neutral-500">
                    显示 1-6 条，共 12 条
                </div>
                <div class="flex space-x-1">
                    <button class="px-3 py-1 border border-neutral-200 rounded-md bg-white text-neutral-500 hover:bg-neutral-50 transition-all-300">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button class="px-3 py-1 border border-primary rounded-md bg-primary text-white">
                        1
                    </button>
                    <button class="px-3 py-1 border border-neutral-200 rounded-md bg-white text-neutral-700 hover:bg-neutral-50 transition-all-300">
                        2
                    </button>
                    <button class="px-3 py-1 border border-neutral-200 rounded-md bg-white text-neutral-500 hover:bg-neutral-50 transition-all-300">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 架构管理内容 (默认隐藏) -->
        <div id="architecture-management-content" class="hidden">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h1 class="text-xl font-bold text-neutral-800">架构管理</h1>
                    <div class="text-sm text-neutral-500 mt-1">
                        <span>首页</span> &gt; <span>架构管理</span>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <button class="px-4 py-2 bg-white border border-neutral-200 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300 flex items-center">
                        <i class="fa fa-download mr-2"></i> 导出
                    </button>
                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center">
                        <i class="fa fa-plus mr-2"></i> 新建架构
                    </button>
                </div>
            </div>

            <!-- 二级架构类型切换 -->
            <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                    <button id="arch-business-btn" class="whitespace-nowrap px-4 py-2 rounded-md bg-primary text-white font-medium flex items-center transition-all-300">
                        <i class="fa fa-sitemap mr-2"></i> 业务架构
                    </button>
                    <button id="arch-data-btn" class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium flex items-center hover:bg-neutral-50 transition-all-300">
                        <i class="fa fa-database mr-2"></i> 数据架构
                    </button>
                    <button id="arch-app-btn" class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium flex items-center hover:bg-neutral-50 transition-all-300">
                        <i class="fa fa-puzzle-piece mr-2"></i> 应用架构
                    </button>
                    <button id="arch-tech-btn" class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium flex items-center hover:bg-neutral-50 transition-all-300">
                        <i class="fa fa-cogs mr-2"></i> 技术架构
                    </button>
                    <button id="arch-security-btn" class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium flex items-center hover:bg-neutral-50 transition-all-300">
                        <i class="fa fa-shield mr-2"></i> 安全架构
                    </button>
                </div>
            </div>

            <!-- 架构内容区域 -->
            <div class="space-y-6">
                <!-- 业务架构内容 -->
                <div id="business-architecture-content" class="arch-content">
                    <!-- 业务架构横向导航 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-secondary text-white font-medium transition-all-300">
                                业务领域管理
                            </button>
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium hover:bg-neutral-50 transition-all-300">
                                业务组件管理
                            </button>
                        </div>
                    </div>

                    <!-- 业务领域管理内容 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-neutral-700">业务领域管理</h3>
                            <div class="flex space-x-2">
                                <button class="text-sm text-neutral-600 hover:text-primary">
                                    <i class="fa fa-filter mr-1"></i> 筛选
                                </button>
                                <button class="text-sm text-neutral-600 hover:text-primary">
                                    <i class="fa fa-sort mr-1"></i> 排序
                                </button>
                            </div>
                        </div>

                        <!-- 业务领域视图切换 -->
                        <div class="flex items-center space-x-2 mb-4">
                            <button class="px-3 py-1 text-sm bg-primary/10 text-primary border border-primary/30 rounded-md hover:bg-primary/20 transition-all-300">
                                业务领域
                            </button>
                            <button class="px-3 py-1 text-sm bg-white text-neutral-700 border border-neutral-200 rounded-md hover:bg-neutral-50 transition-all-300">
                                业务事件
                            </button>
                            <button class="px-3 py-1 text-sm bg-white text-neutral-700 border border-neutral-200 rounded-md hover:bg-neutral-50 transition-all-300">
                                活动
                            </button>
                        </div>

                        <!-- 业务领域视图 -->
                        <div class="bg-neutral-50 rounded-lg p-4">
                            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4">
                                <!-- 业务领域卡片 -->
                                <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-primary cursor-pointer hover:shadow-md transition-all-300">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="font-medium text-neutral-700">IT战略管理</h4>
                                        <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">核心</span>
                                    </div>
                                    <p class="text-sm text-neutral-500 mb-3">负责银行整体IT战略规划与落地</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-neutral-400">架构师: 张三</span>
                                        <div class="flex space-x-1">
                                            <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">12个事件</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-secondary cursor-pointer hover:shadow-md transition-all-300">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="font-medium text-neutral-700">企业架构管理</h4>
                                        <span class="text-xs px-2 py-1 bg-secondary/10 text-secondary rounded-full">核心</span>
                                    </div>
                                    <p class="text-sm text-neutral-500 mb-3">负责企业级架构设计与治理</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-neutral-400">架构师: 李四</span>
                                        <div class="flex space-x-1">
                                            <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">8个事件</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-success cursor-pointer hover:shadow-md transition-all-300">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="font-medium text-neutral-700">需求管理</h4>
                                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">核心</span>
                                    </div>
                                    <p class="text-sm text-neutral-500 mb-3">负责业务需求的收集、分析与管理</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-neutral-400">架构师: 王五</span>
                                        <div class="flex space-x-1">
                                            <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">15个事件</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-warning cursor-pointer hover:shadow-md transition-all-300">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="font-medium text-neutral-700">设计管理</h4>
                                        <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">标准</span>
                                    </div>
                                    <p class="text-sm text-neutral-500 mb-3">负责系统设计与方案评审</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-neutral-400">架构师: 赵六</span>
                                        <div class="flex space-x-1">
                                            <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">10个事件</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-danger cursor-pointer hover:shadow-md transition-all-300">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="font-medium text-neutral-700">开发管理</h4>
                                        <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full">标准</span>
                                    </div>
                                    <p class="text-sm text-neutral-500 mb-3">负责应用开发与代码管理</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-neutral-400">架构师: 孙七</span>
                                        <div class="flex space-x-1">
                                            <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">7个事件</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-primary cursor-pointer hover:shadow-md transition-all-300">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="font-medium text-neutral-700">测试管理</h4>
                                        <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">标准</span>
                                    </div>
                                    <p class="text-sm text-neutral-500 mb-3">负责系统测试与质量保证</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-neutral-400">架构师: 周八</span>
                                        <div class="flex space-x-1">
                                            <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">9个事件</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据架构内容 (默认隐藏) -->
                <div id="data-architecture-content" class="arch-content hidden">
                    <!-- 数据架构横向导航 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-secondary text-white font-medium transition-all-300">
                                业务对象
                            </button>
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium hover:bg-neutral-50 transition-all-300">
                                业务实体
                            </button>
                        </div>
                    </div>

                    <!-- 业务对象内容 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-neutral-700">业务对象管理</h3>
                            <button class="text-primary text-sm hover:underline">查看详情</button>
                        </div>

                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-neutral-200">
                                <thead class="bg-neutral-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            对象名称
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            描述
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            所属业务域
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            数据分类
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            负责人
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-neutral-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                                            客户
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                            银行服务对象，包含个人和企业客户
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
                                                零售银行
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-neutral-100 text-neutral-700">
                                                主数据
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                            张三
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                            <div class="flex space-x-2">
                                                <button class="text-primary hover:text-primary/80">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="text-neutral-500 hover:text-neutral-700">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                                            账户
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                            客户在银行开设的各类账户
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-secondary/10 text-secondary">
                                                核心银行
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-neutral-100 text-neutral-700">
                                                交易数据
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                            李四
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                            <div class="flex space-x-2">
                                                <button class="text-primary hover:text-primary/80">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="text-neutral-500 hover:text-neutral-700">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 应用架构内容 (默认隐藏) -->
                <div id="application-architecture-content" class="arch-content hidden">
                    <!-- 应用架构横向导航 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-secondary text-white font-medium transition-all-300">
                                应用架构蓝图
                            </button>
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium hover:bg-neutral-50 transition-all-300">
                                系统清单
                            </button>
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium hover:bg-neutral-50 transition-all-300">
                                移动应用清单
                            </button>
                        </div>
                    </div>

                    <!-- 应用架构蓝图内容 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-neutral-700">应用架构蓝图</h3>
                            <div class="flex space-x-2">
                                <button class="text-sm text-neutral-600 hover:text-primary">
                                    <i class="fa fa-expand mr-1"></i> 全屏
                                </button>
                                <button class="text-sm text-neutral-600 hover:text-primary">
                                    <i class="fa fa-download mr-1"></i> 导出
                                </button>
                            </div>
                        </div>

                        <div class="bg-neutral-50 rounded-lg p-4 h-[500px] flex items-center justify-center">
                            <div class="text-center">
                                <i class="fa fa-sitemap text-5xl text-neutral-300 mb-4"></i>
                                <p class="text-neutral-500">应用架构蓝图示意图</p>
                                <p class="text-sm text-neutral-400 mt-2">包含核心银行系统、渠道系统、风险管理系统等多层架构</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 技术架构内容 (默认隐藏) -->
                <div id="technology-architecture-content" class="arch-content hidden">
                    <!-- 技术架构横向导航 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-secondary text-white font-medium transition-all-300">
                                技术架构蓝图
                            </button>
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium hover:bg-neutral-50 transition-all-300">
                                技术组件基线
                            </button>
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium hover:bg-neutral-50 transition-all-300">
                                性能容量基线
                            </button>
                            <button class="whitespace-nowrap px-4 py-2 rounded-md bg-white text-neutral-700 border border-neutral-200 font-medium hover:bg-neutral-50 transition-all-300">
                                高可用基线
                            </button>
                        </div>
                    </div>

                    <!-- 技术架构蓝图内容 -->
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-neutral-700">技术架构蓝图</h3>
                            <div class="flex space-x-2">
                                <button class="text-sm text-neutral-600 hover:text-primary">
                                    <i class="fa fa-expand mr-1"></i> 全屏
                                </button>
                                <button class="text-sm text-neutral-600 hover:text-primary">
                                    <i class="fa fa-download mr-1"></i> 导出
                                </button>
                            </div>
                        </div>

                        <div class="bg-neutral-50 rounded-lg p-4 h-[500px] flex items-center justify-center">
                            <div class="text-center">
                                <i class="fa fa-code-fork text-5xl text-neutral-300 mb-4"></i>
                                <p class="text-neutral-500">技术架构蓝图示意图</p>
                                <p class="text-sm text-neutral-400 mt-2">包含基础设施层、平台层、应用层等多层技术架构</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 安全架构内容 (默认隐藏) -->
                <div id="security-architecture-content" class="arch-content hidden">
                    <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-neutral-700">安全架构概述</h3>
                            <button class="text-primary text-sm hover:underline">查看详情</button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <h4 class="text-sm font-medium text-neutral-700 mb-3">安全域划分</h4>
                                <ul class="space-y-2">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">生产域</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">测试域</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">开发域</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">管理域</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">DMZ域</span>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-neutral-700 mb-3">安全能力</h4>
                                <ul class="space-y-2">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">身份认证与访问控制</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">数据加密与脱敏</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm text-neutral-600">安全审计与监控</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 项目进度概览图表
        const projectProgressCtx = document.getElementById('projectProgressChart').getContext('2d');
        new Chart(projectProgressCtx, {
            type: 'bar',
            data: {
                labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                datasets: [{
                    label: '计划项目',
                    data: [8, 10, 12, 15],
                    backgroundColor: 'rgba(59, 130, 246, 0.2)',
                    borderColor: 'rgba(59, 130, 246, 1)',
                    borderWidth: 1
                }, {
                    label: '完成项目',
                    data: [6, 9, 10, 0],
                    backgroundColor: 'rgba(59, 130, 246, 0.8)',
                    borderColor: 'rgba(59, 130, 246, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: '项目进度概览'
                    }
                }
            }
        });

        // 流程阶段分布图表
        const processStageCtx = document.getElementById('processStageChart').getContext('2d');
        new Chart(processStageCtx, {
            type: 'doughnut',
            data: {
                labels: ['需求分析', '设计', '开发', '测试', '投产'],
                datasets: [{
                    data: [25, 20, 30, 15, 10],
                    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#6366f1', '#6b7280'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    title: {
                        display: true,
                        text: '流程阶段分布'
                    }
                }
            }
        });

        // 移动端菜单切换
        const menuToggle = document.createElement('button');
        menuToggle.className = 'fixed bottom-4 right-4 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center md:hidden z-50';
        menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
        document.body.appendChild(menuToggle);

        menuToggle.addEventListener('click', function() {
            const aside = document.querySelector('aside');
            aside.classList.toggle('-translate-x-full');
            if (aside.classList.contains('-translate-x-full')) {
                menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
            } else {
                menuToggle.innerHTML = '<i class="fa fa-times text-xl"></i>';
            }
        });

        // 任务项点击效果
        const taskItems = document.querySelectorAll('.task-item');
        taskItems.forEach(item => {
            item.addEventListener('click', function() {
                taskItems.forEach(i => i.classList.remove('bg-primary/5', 'border-l-4', 'border-primary'));
                this.classList.add('bg-primary/5', 'border-l-4', 'border-primary');
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({ 
                        top: targetElement.offsetTop - 80, 
                        behavior: 'smooth' 
                    });
                }
            });
        });
    });
</script>
    <!-- 遮罩层 -->
    <div id="modal-overlay" class="fixed inset-0 bg-black/50 z-40 hidden"></div>

    <!-- 批量创建任务弹窗 -->
    <div id="batch-task-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
            <!-- 弹窗头部 -->
            <div class="bg-primary text-white px-6 py-4 flex items-center justify-between">
                <h2 class="text-xl font-bold">创建任务</h2>
                <button id="close-batch-modal" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <!-- 标签页切换 -->
            <div class="border-b border-gray-200">
                <div class="flex px-6">
                    <button id="preset-tab" class="tab-button active px-4 py-3 text-sm font-medium border-b-2 border-primary text-primary">
                        <i class="fa fa-list mr-1"></i> 预置任务
                    </button>
                    <button id="custom-tab" class="tab-button px-4 py-3 text-sm font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-800">
                        <i class="fa fa-plus-circle mr-1"></i> 自定义任务
                    </button>
                </div>
            </div>

            <!-- 弹窗内容 -->
            <div class="flex-1 overflow-y-auto">
                <!-- 预置任务内容 -->
                <div id="preset-content" class="tab-content p-6">
                    <!-- 工艺任务选择 -->
                    <div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg border border-blue-200">
                        <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center">
                            <i class="fa fa-cog text-primary mr-2"></i>
                            选择工艺任务类型
                        </h3>
                        <div class="flex flex-wrap gap-4">
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="processType" value="enterprise" class="process-type-radio w-4 h-4 text-primary focus:ring-primary" checked>
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-building-o mr-1"></i>企架工艺任务
                                </span>
                            </label>
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="processType" value="galaxy" class="process-type-radio w-4 h-4 text-primary focus:ring-primary">
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-rocket mr-1"></i>银河工艺任务
                                </span>
                            </label>
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="processType" value="traditional" class="process-type-radio w-4 h-4 text-primary focus:ring-primary">
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-1"></i>传统工艺任务
                                </span>
                            </label>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">
                            <i class="fa fa-info-circle mr-1"></i>
                            不同工艺任务对应不同的阶段划分，请根据项目需求选择合适的工艺类型
                        </p>
                    </div>

                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-4">请选择要创建的任务项，并为每个任务分配负责人。点击阶段标题可展开/折叠任务列表：</p>
                        
                        <!-- 动态阶段容器 -->
                        <div id="phases-container">
                        </div>
                    </div>
                </div>

                <!-- 自定义任务内容 -->
                <div id="custom-content" class="tab-content hidden p-6">
                    <form id="custom-task-form">
                        <!-- 任务名称 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fa fa-tag text-primary mr-1"></i> 任务名称 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="task-name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入任务名称" required>
                        </div>

                        <!-- 任务描述 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fa fa-align-left text-primary mr-1"></i> 任务描述
                            </label>
                            <textarea id="task-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入任务描述（可选）"></textarea>
                        </div>

                        <!-- 任务阶段和负责人 -->
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fa fa-sitemap text-primary mr-1"></i> 任务阶段 <span class="text-red-500">*</span>
                                </label>
                                <select id="task-phase" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                                    <option value="">请选择阶段</option>
                                    <option value="战略解析">战略解析</option>
                                    <option value="解决方案设计">解决方案设计</option>
                                    <option value="应用设计">应用设计</option>
                                    <option value="编码开发">编码开发</option>
                                    <option value="测试验证">测试验证</option>
                                    <option value="投产">投产</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fa fa-user text-primary mr-1"></i> 负责人 <span class="text-red-500">*</span>
                                </label>
                                <select id="task-assignee" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                                    <option value="">请选择负责人</option>
                                    <option value="张三">张三</option>
                                    <option value="李四">李四</option>
                                    <option value="王五">王五</option>
                                    <option value="赵六">赵六</option>
                                </select>
                            </div>
                        </div>

                        <!-- 优先级和截止日期 -->
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fa fa-flag text-primary mr-1"></i> 优先级 <span class="text-red-500">*</span>
                                </label>
                                <select id="task-priority" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                                    <option value="high">高</option>
                                    <option value="medium" selected>中</option>
                                    <option value="low">低</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fa fa-calendar text-primary mr-1"></i> 截止日期
                                </label>
                                <input type="date" id="task-deadline" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                            </div>
                        </div>

                        <!-- 任务类型 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fa fa-tasks text-primary mr-1"></i> 任务类型
                            </label>
                            <select id="task-type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                                <option value="IPDO">IPDO任务</option>
                                <option value="普通">普通任务</option>
                                <option value="紧急">紧急任务</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button id="batch-cancel-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                    取消
                </button>
                <button id="batch-submit-btn" class="submit-button px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90">
                    <i class="fa fa-check mr-1"></i> <span id="submit-text">批量创建任务</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 团队详情模态框 -->
    <div id="team-detail-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-7xl max-h-[95vh] overflow-hidden flex flex-col">
            <!-- 模态框头部 -->
            <div class="bg-gradient-to-r from-primary to-secondary text-white px-6 py-5 flex justify-between items-center">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fa fa-users text-2xl"></i>
                    </div>
                    <div>
                        <h2 id="modal-team-name" class="text-2xl font-bold"></h2>
                        <p id="modal-team-type" class="text-sm text-white/80 mt-1"></p>
                    </div>
                </div>
                <button id="close-team-modal" class="text-white hover:bg-white/10 rounded-full p-2 transition-all">
                    <i class="fa fa-times text-2xl"></i>
                </button>
            </div>
            
            <!-- 模态框内容区域 -->
            <div class="flex-1 overflow-y-auto p-6">
                <!-- 第一行：团队任务列表和团队成员清单 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- 团队任务列表卡片 -->
                    <div class="bg-white border border-neutral-200 rounded-lg p-5">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-bold text-neutral-800 flex items-center">
                                <i class="fa fa-tasks text-primary mr-2"></i>团队任务列表
                            </h3>
                        </div>
                        
                        <!-- Tab切换 -->
                        <div class="flex border-b border-neutral-200 mb-4">
                            <button class="task-time-tab px-4 py-2 text-sm font-medium text-primary border-b-2 border-primary" data-period="today">
                                本日
                            </button>
                            <button class="task-time-tab px-4 py-2 text-sm font-medium text-neutral-500 hover:text-primary" data-period="week">
                                本周
                            </button>
                            <button class="task-time-tab px-4 py-2 text-sm font-medium text-neutral-500 hover:text-primary" data-period="month">
                                本月
                            </button>
                        </div>
                        
                        <!-- 任务清单 -->
                        <div id="team-task-list" class="space-y-3 max-h-96 overflow-y-auto">
                            <!-- 任务项将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <!-- 团队成员清单卡片 -->
                    <div class="bg-white border border-neutral-200 rounded-lg p-5">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-bold text-neutral-800 flex items-center">
                                <i class="fa fa-user-circle text-primary mr-2"></i>团队成员清单
                            </h3>
                        </div>
                        
                        <!-- 成员分类Tab -->
                        <div class="flex flex-wrap gap-2 mb-4">
                            <button class="member-cat-tab px-3 py-1 text-xs font-medium bg-primary text-white rounded-full" data-cat="all">
                                全部
                            </button>
                            <button class="member-cat-tab px-3 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 hover:bg-neutral-200 rounded-full" data-cat="dev">
                                研发人员
                            </button>
                            <button class="member-cat-tab px-3 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 hover:bg-neutral-200 rounded-full" data-cat="test">
                                测试人员
                            </button>
                            <button class="member-cat-tab px-3 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 hover:bg-neutral-200 rounded-full" data-cat="arch">
                                架构师
                            </button>
                        </div>
                        
                        <!-- 成员列表 -->
                        <div id="team-member-list" class="space-y-3 max-h-96 overflow-y-auto">
                            <!-- 成员项将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
                
                <!-- 进展及产出物汇总 -->
                <div class="bg-white border border-neutral-200 rounded-lg p-5 mb-6">
                    <h3 class="text-lg font-bold text-neutral-800 flex items-center mb-4">
                        <i class="fa fa-line-chart text-primary mr-2"></i>进展及产出物汇总
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm text-blue-700 font-medium">总任务数</span>
                                <i class="fa fa-tasks text-blue-500"></i>
                            </div>
                            <div class="text-2xl font-bold text-blue-800" id="total-tasks-count">0</div>
                            <div class="text-xs text-blue-600 mt-1">本周新增 0 个</div>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm text-green-700 font-medium">已完成</span>
                                <i class="fa fa-check-circle text-green-500"></i>
                            </div>
                            <div class="text-2xl font-bold text-green-800" id="completed-tasks-count">0</div>
                            <div class="text-xs text-green-600 mt-1">完成率 0%</div>
                        </div>
                        <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-4 border border-orange-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm text-orange-700 font-medium">进行中</span>
                                <i class="fa fa-spinner text-orange-500"></i>
                            </div>
                            <div class="text-2xl font-bold text-orange-800" id="inprogress-tasks-count">0</div>
                            <div class="text-xs text-orange-600 mt-1">占比 0%</div>
                        </div>
                        <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm text-purple-700 font-medium">产出物</span>
                                <i class="fa fa-file-text text-purple-500"></i>
                            </div>
                            <div class="text-2xl font-bold text-purple-800" id="deliverables-count">0</div>
                            <div class="text-xs text-purple-600 mt-1">设计文档、代码等</div>
                        </div>
                    </div>
                </div>
                
                <!-- 第二行：团队看板 -->
                <div class="mb-4 flex justify-between items-center">
                    <h3 class="text-lg font-bold text-neutral-800 flex items-center">
                        <i class="fa fa-th-large text-primary mr-2"></i>团队看板
                    </h3>
                    <button id="create-team-board-btn" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white text-sm rounded-md transition-all flex items-center">
                        <i class="fa fa-plus mr-2"></i>创建团队看板
                    </button>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 团队看板卡片1 -->
                    <div class="bg-white border border-neutral-200 rounded-lg p-5 hover:shadow-lg transition-all border-l-4 border-l-primary">
                        <div class="flex justify-between items-start mb-4">
                            <h4 class="text-base font-semibold text-neutral-700">用户管理系统开发</h4>
                            <div class="flex items-center space-x-2">
                                <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">活跃</span>
                                <button class="text-neutral-400 hover:text-primary" onclick="manageTeamBoardMembers('board-1')">
                                    <i class="fa fa-users" title="管理成员"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-4">
                            <p class="text-sm text-neutral-600">负责用户管理系统的开发、测试和维护</p>
                        </div>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">成员</span>
                                <span class="text-neutral-700">8人</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">进行中</span>
                                <span class="text-neutral-700">12个</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">逾期</span>
                                <span class="text-danger">2个</span>
                            </div>
                        </div>
                        <div class="mt-4 pt-4 border-t border-neutral-200">
                            <div class="flex -space-x-2">
                                <img src="https://picsum.photos/id/1001/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1002/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1003/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <div class="w-7 h-7 rounded-full border-2 border-white bg-neutral-100 flex items-center justify-center text-xs text-neutral-500">+5</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 团队看板卡片2 -->
                    <div class="bg-white border border-neutral-200 rounded-lg p-5 hover:shadow-lg transition-all border-l-4 border-l-secondary">
                        <div class="flex justify-between items-start mb-4">
                            <h4 class="text-base font-semibold text-neutral-700">贷款审批流程优化</h4>
                            <div class="flex items-center space-x-2">
                                <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">活跃</span>
                                <button class="text-neutral-400 hover:text-primary" onclick="manageTeamBoardMembers('board-2')">
                                    <i class="fa fa-users" title="管理成员"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-4">
                            <p class="text-sm text-neutral-600">专注于贷款审批流程的优化和自动化</p>
                        </div>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">成员</span>
                                <span class="text-neutral-700">6人</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">进行中</span>
                                <span class="text-neutral-700">8个</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">逾期</span>
                                <span class="text-neutral-700">0个</span>
                            </div>
                        </div>
                        <div class="mt-4 pt-4 border-t border-neutral-200">
                            <div class="flex -space-x-2">
                                <img src="https://picsum.photos/id/1006/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1007/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1008/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <div class="w-7 h-7 rounded-full border-2 border-white bg-neutral-100 flex items-center justify-center text-xs text-neutral-500">+3</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 团队看板卡片3 -->
                    <div class="bg-white border border-neutral-200 rounded-lg p-5 hover:shadow-lg transition-all border-l-4 border-l-warning">
                        <div class="flex justify-between items-start mb-4">
                            <h4 class="text-base font-semibold text-neutral-700">数据报表平台建设</h4>
                            <div class="flex items-center space-x-2">
                                <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">筹备中</span>
                                <button class="text-neutral-400 hover:text-primary" onclick="manageTeamBoardMembers('board-3')">
                                    <i class="fa fa-users" title="管理成员"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-4">
                            <p class="text-sm text-neutral-600">负责建设统一的数据报表平台</p>
                        </div>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">成员</span>
                                <span class="text-neutral-700">4人</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">进行中</span>
                                <span class="text-neutral-700">3个</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-neutral-500">逾期</span>
                                <span class="text-neutral-700">0个</span>
                            </div>
                        </div>
                        <div class="mt-4 pt-4 border-t border-neutral-200">
                            <div class="flex -space-x-2">
                                <img src="https://picsum.photos/id/1010/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1011/200/200" alt="成员" class="w-7 h-7 rounded-full border-2 border-white">
                                <div class="w-7 h-7 rounded-full border-2 border-white bg-neutral-100 flex items-center justify-center text-xs text-neutral-500">+2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统详情模态框 -->
    <div id="system-detail-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
            <!-- 模态框头部 -->
            <div class="bg-white border-b border-neutral-200 px-6 py-4 flex justify-between items-center">
                <div class="flex items-center gap-4">
                    <h2 id="modal-system-name" class="text-2xl font-bold text-neutral-800"></h2>
                    <span id="modal-system-status" class="px-3 py-1 text-xs font-medium rounded-full"></span>
                </div>
                <button id="close-system-modal" class="text-neutral-400 hover:text-neutral-600 transition-all">
                    <i class="fa fa-times text-2xl"></i>
                </button>
            </div>
            <!-- 模态框内容区域 -->
            <div class="flex-1 overflow-y-auto p-6" id="modal-content">
                <!-- 内容将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 系统详情模态框JS -->
    <script src="system-modal.js"></script>

    <!-- 团队详情模态框JS -->
    <script>
        // 团队数据模拟
        const teamData = {
            'AA架构团队': {
                type: '解决方案',
                tasks: {
                    today: [
                        { id: 'T001', name: '业务架构设计', type: 'IPDO任务', assignee: '张三', schedule: 'PRJ-2024-001', status: '进行中', progress: 60 },
                        { id: 'T002', name: '数据架构评审', type: '普通任务', assignee: '李四', schedule: 'PRJ-2024-001', status: '待处理', progress: 0 },
                        { id: 'T003', name: '技术架构文档编写', type: 'IPDO任务', assignee: '王五', schedule: 'PRJ-2024-002', status: '已完成', progress: 100 }
                    ],
                    week: [
                        { id: 'T001', name: '业务架构设计', type: 'IPDO任务', assignee: '张三', schedule: 'PRJ-2024-001', status: '进行中', progress: 60 },
                        { id: 'T002', name: '数据架构评审', type: '普通任务', assignee: '李四', schedule: 'PRJ-2024-001', status: '待处理', progress: 0 },
                        { id: 'T003', name: '技术架构文档编写', type: 'IPDO任务', assignee: '王五', schedule: 'PRJ-2024-002', status: '已完成', progress: 100 },
                        { id: 'T004', name: '安全架构评估', type: 'IPDO任务', assignee: '赵六', schedule: 'PRJ-2024-003', status: '进行中', progress: 30 },
                        { id: 'T005', name: '应用架构设计', type: '普通任务', assignee: '张三', schedule: 'PRJ-2024-002', status: '进行中', progress: 45 }
                    ],
                    month: [
                        { id: 'T001', name: '业务架构设计', type: 'IPDO任务', assignee: '张三', schedule: 'PRJ-2024-001', status: '进行中', progress: 60 },
                        { id: 'T002', name: '数据架构评审', type: '普通任务', assignee: '李四', schedule: 'PRJ-2024-001', status: '待处理', progress: 0 },
                        { id: 'T003', name: '技术架构文档编写', type: 'IPDO任务', assignee: '王五', schedule: 'PRJ-2024-002', status: '已完成', progress: 100 },
                        { id: 'T004', name: '安全架构评估', type: 'IPDO任务', assignee: '赵六', schedule: 'PRJ-2024-003', status: '进行中', progress: 30 },
                        { id: 'T005', name: '应用架构设计', type: '普通任务', assignee: '张三', schedule: 'PRJ-2024-002', status: '进行中', progress: 45 },
                        { id: 'T006', name: '架构基线建立', type: 'IPDO任务', assignee: '李四', schedule: 'PRJ-2024-004', status: '已完成', progress: 100 },
                        { id: 'T007', name: '容器化架构设计', type: '普通任务', assignee: '王五', schedule: 'PRJ-2024-003', status: '进行中', progress: 70 },
                        { id: 'T008', name: '微服务架构规划', type: 'IPDO任务', assignee: '赵六', schedule: 'PRJ-2024-005', status: '待处理', progress: 0 }
                    ]
                },
                members: [
                    { name: '张三', category: 'arch', tasks: 5, completed: 3, saturation: 85, avatar: 'https://picsum.photos/id/1001/200/200' },
                    { name: '李四', category: 'arch', tasks: 4, completed: 2, saturation: 70, avatar: 'https://picsum.photos/id/1002/200/200' },
                    { name: '王五', category: 'dev', tasks: 6, completed: 4, saturation: 90, avatar: 'https://picsum.photos/id/1003/200/200' },
                    { name: '赵六', category: 'dev', tasks: 3, completed: 1, saturation: 60, avatar: 'https://picsum.photos/id/1004/200/200' },
                    { name: '钟七', category: 'test', tasks: 4, completed: 3, saturation: 75, avatar: 'https://picsum.photos/id/1005/200/200' }
                ]
            },
            'BB应用设计团队': {
                type: '应用设计',
                tasks: {
                    today: [
                        { id: 'T101', name: '前端页面设计', type: 'IPDO任务', assignee: '刘八', schedule: 'PRJ-2024-006', status: '进行中', progress: 50 },
                        { id: 'T102', name: '后端接口设计', type: '普通任务', assignee: '孙九', schedule: 'PRJ-2024-006', status: '待处理', progress: 0 }
                    ],
                    week: [
                        { id: 'T101', name: '前端页面设计', type: 'IPDO任务', assignee: '刘八', schedule: 'PRJ-2024-006', status: '进行中', progress: 50 },
                        { id: 'T102', name: '后端接口设计', type: '普通任务', assignee: '孙九', schedule: 'PRJ-2024-006', status: '待处理', progress: 0 },
                        { id: 'T103', name: '数据库设计', type: 'IPDO任务', assignee: '周十', schedule: 'PRJ-2024-007', status: '进行中', progress: 40 },
                        { id: 'T104', name: 'UI/UX设计评审', type: '普通任务', assignee: '吴十一', schedule: 'PRJ-2024-006', status: '已完成', progress: 100 }
                    ],
                    month: [
                        { id: 'T101', name: '前端页面设计', type: 'IPDO任务', assignee: '刘八', schedule: 'PRJ-2024-006', status: '进行中', progress: 50 },
                        { id: 'T102', name: '后端接口设计', type: '普通任务', assignee: '孙九', schedule: 'PRJ-2024-006', status: '待处理', progress: 0 },
                        { id: 'T103', name: '数据库设计', type: 'IPDO任务', assignee: '周十', schedule: 'PRJ-2024-007', status: '进行中', progress: 40 },
                        { id: 'T104', name: 'UI/UX设计评审', type: '普通任务', assignee: '吴十一', schedule: 'PRJ-2024-006', status: '已完成', progress: 100 },
                        { id: 'T105', name: '移动端设计', type: 'IPDO任务', assignee: '刘八', schedule: 'PRJ-2024-008', status: '进行中', progress: 60 },
                        { id: 'T106', name: '微服务拆分设计', type: '普通任务', assignee: '孙九', schedule: 'PRJ-2024-007', status: '已完成', progress: 100 }
                    ]
                },
                members: [
                    { name: '刘八', category: 'dev', tasks: 5, completed: 3, saturation: 80, avatar: 'https://picsum.photos/id/1006/200/200' },
                    { name: '孙九', category: 'dev', tasks: 4, completed: 2, saturation: 65, avatar: 'https://picsum.photos/id/1007/200/200' },
                    { name: '周十', category: 'arch', tasks: 3, completed: 1, saturation: 55, avatar: 'https://picsum.photos/id/1008/200/200' },
                    { name: '吴十一', category: 'dev', tasks: 4, completed: 3, saturation: 70, avatar: 'https://picsum.photos/id/1009/200/200' }
                ]
            },
            'CC研发团队': {
                type: '开发',
                tasks: {
                    today: [
                        { id: 'T201', name: '前端开发', type: '普通任务', assignee: '郑十二', schedule: 'PRJ-2024-009', status: '进行中', progress: 75 },
                        { id: 'T202', name: '后端开发', type: 'IPDO任务', assignee: '王十三', schedule: 'PRJ-2024-009', status: '进行中', progress: 65 }
                    ],
                    week: [
                        { id: 'T201', name: '前端开发', type: '普通任务', assignee: '郑十二', schedule: 'PRJ-2024-009', status: '进行中', progress: 75 },
                        { id: 'T202', name: '后端开发', type: 'IPDO任务', assignee: '王十三', schedule: 'PRJ-2024-009', status: '进行中', progress: 65 },
                        { id: 'T203', name: '数据库脚本开发', type: '普通任务', assignee: '刘十四', schedule: 'PRJ-2024-010', status: '已完成', progress: 100 },
                        { id: 'T204', name: '接口联调', type: 'IPDO任务', assignee: '陈十五', schedule: 'PRJ-2024-009', status: '进行中', progress: 55 }
                    ],
                    month: [
                        { id: 'T201', name: '前端开发', type: '普通任务', assignee: '郑十二', schedule: 'PRJ-2024-009', status: '进行中', progress: 75 },
                        { id: 'T202', name: '后端开发', type: 'IPDO任务', assignee: '王十三', schedule: 'PRJ-2024-009', status: '进行中', progress: 65 },
                        { id: 'T203', name: '数据库脚本开发', type: '普通任务', assignee: '刘十四', schedule: 'PRJ-2024-010', status: '已完成', progress: 100 },
                        { id: 'T204', name: '接口联调', type: 'IPDO任务', assignee: '陈十五', schedule: 'PRJ-2024-009', status: '进行中', progress: 55 },
                        { id: 'T205', name: '代码审查', type: '普通任务', assignee: '郑十二', schedule: 'PRJ-2024-011', status: '待处理', progress: 0 },
                        { id: 'T206', name: '性能优化', type: 'IPDO任务', assignee: '王十三', schedule: 'PRJ-2024-010', status: '进行中', progress: 30 },
                        { id: 'T207', name: '单元测试编写', type: '普通任务', assignee: '刘十四', schedule: 'PRJ-2024-009', status: '进行中', progress: 80 }
                    ]
                },
                members: [
                    { name: '郑十二', category: 'dev', tasks: 6, completed: 4, saturation: 95, avatar: 'https://picsum.photos/id/1010/200/200' },
                    { name: '王十三', category: 'dev', tasks: 5, completed: 3, saturation: 88, avatar: 'https://picsum.photos/id/1011/200/200' },
                    { name: '刘十四', category: 'dev', tasks: 4, completed: 3, saturation: 72, avatar: 'https://picsum.photos/id/1012/200/200' },
                    { name: '陈十五', category: 'test', tasks: 3, completed: 2, saturation: 65, avatar: 'https://picsum.photos/id/1013/200/200' }
                ]
            },
            'DD测试团队': {
                type: '测试',
                tasks: {
                    today: [
                        { id: 'T301', name: '功能测试', type: '普通任务', assignee: '张十六', schedule: 'PRJ-2024-012', status: '进行中', progress: 60 },
                        { id: 'T302', name: '集成测试', type: 'IPDO任务', assignee: '李十七', schedule: 'PRJ-2024-012', status: '待处理', progress: 0 }
                    ],
                    week: [
                        { id: 'T301', name: '功能测试', type: '普通任务', assignee: '张十六', schedule: 'PRJ-2024-012', status: '进行中', progress: 60 },
                        { id: 'T302', name: '集成测试', type: 'IPDO任务', assignee: '李十七', schedule: 'PRJ-2024-012', status: '待处理', progress: 0 },
                        { id: 'T303', name: '性能测试', type: '普通任务', assignee: '王十八', schedule: 'PRJ-2024-013', status: '进行中', progress: 45 },
                        { id: 'T304', name: '安全测试', type: 'IPDO任务', assignee: '赵十九', schedule: 'PRJ-2024-013', status: '已完成', progress: 100 }
                    ],
                    month: [
                        { id: 'T301', name: '功能测试', type: '普通任务', assignee: '张十六', schedule: 'PRJ-2024-012', status: '进行中', progress: 60 },
                        { id: 'T302', name: '集成测试', type: 'IPDO任务', assignee: '李十七', schedule: 'PRJ-2024-012', status: '待处理', progress: 0 },
                        { id: 'T303', name: '性能测试', type: '普通任务', assignee: '王十八', schedule: 'PRJ-2024-013', status: '进行中', progress: 45 },
                        { id: 'T304', name: '安全测试', type: 'IPDO任务', assignee: '赵十九', schedule: 'PRJ-2024-013', status: '已完成', progress: 100 },
                        { id: 'T305', name: '用户验收测试', type: '普通任务', assignee: '张十六', schedule: 'PRJ-2024-014', status: '进行中', progress: 70 },
                        { id: 'T306', name: '自动化测试', type: 'IPDO任务', assignee: '李十七', schedule: 'PRJ-2024-013', status: '已完成', progress: 100 },
                        { id: 'T307', name: '测试报告编写', type: '普通任务', assignee: '王十八', schedule: 'PRJ-2024-012', status: '进行中', progress: 50 }
                    ]
                },
                members: [
                    { name: '张十六', category: 'test', tasks: 5, completed: 3, saturation: 82, avatar: 'https://picsum.photos/id/1014/200/200' },
                    { name: '李十七', category: 'test', tasks: 4, completed: 3, saturation: 78, avatar: 'https://picsum.photos/id/1015/200/200' },
                    { name: '王十八', category: 'test', tasks: 3, completed: 1, saturation: 60, avatar: 'https://picsum.photos/id/1016/200/200' },
                    { name: '赵十九', category: 'arch', tasks: 2, completed: 2, saturation: 50, avatar: 'https://picsum.photos/id/1017/200/200' }
                ]
            }
        };

        let currentTeamName = '';
        let currentTimePeriod = 'today';
        let currentMemberCategory = 'all';

        // 打开团队详情弹窗
        function openTeamDetailModal(teamName, teamType, teamId) {
            currentTeamName = teamName;
            const modal = document.getElementById('team-detail-modal');
            const team = teamData[teamName];
            
            if (!team) {
                console.error('团队数据未找到:', teamName);
                return;
            }
            
            // 设置团队名称和类型
            document.getElementById('modal-team-name').textContent = teamName;
            document.getElementById('modal-team-type').textContent = '团队类型：' + team.type + ' | 团队编号：' + teamId;
            
            // 渲染任务列表
            renderTaskList(team.tasks[currentTimePeriod]);
            
            // 渲染成员列表
            renderMemberList(team.members, currentMemberCategory);
            
            // 更新统计数据
            updateStatistics(team);
            
            // 显示弹窗
            modal.classList.remove('hidden');
        }

        // 渲染任务列表
        function renderTaskList(tasks) {
            const container = document.getElementById('team-task-list');
            if (!tasks || tasks.length === 0) {
                container.innerHTML = '<div class="text-center text-neutral-500 py-8">暂无任务</div>';
                return;
            }
            
            container.innerHTML = tasks.map(task => {
                const statusColors = {
                    '待处理': 'bg-neutral-100 text-neutral-600',
                    '进行中': 'bg-blue-100 text-blue-600',
                    '已完成': 'bg-green-100 text-green-600'
                };
                const typeColors = {
                    'IPDO任务': 'bg-purple-100 text-purple-600',
                    '普通任务': 'bg-neutral-100 text-neutral-600',
                    '紧急任务': 'bg-red-100 text-red-600'
                };
                return `
                    <div class="bg-neutral-50 rounded-lg p-3 hover:bg-neutral-100 transition-all">
                        <div class="flex justify-between items-start mb-2">
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-neutral-800">${task.name}</h4>
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="text-xs px-2 py-0.5 rounded-full ${typeColors[task.type] || typeColors['普通任务']}">${task.type}</span>
                                    <span class="text-xs px-2 py-0.5 rounded-full ${statusColors[task.status] || statusColors['待处理']}">${task.status}</span>
                                </div>
                            </div>
                            <div class="text-right ml-3">
                                <div class="text-xs text-neutral-500">进度</div>
                                <div class="text-sm font-semibold text-primary">${task.progress}%</div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-xs text-neutral-500">
                            <span><i class="fa fa-user mr-1"></i>${task.assignee}</span>
                            <span><i class="fa fa-calendar mr-1"></i>${task.schedule}</span>
                        </div>
                        <div class="mt-2">
                            <div class="w-full bg-neutral-200 rounded-full h-1.5">
                                <div class="bg-primary h-1.5 rounded-full transition-all" style="width: ${task.progress}%"></div>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
        }

        // 渲染成员列表
        function renderMemberList(members, category) {
            const container = document.getElementById('team-member-list');
            const filteredMembers = category === 'all' ? members : members.filter(m => m.category === category);
            
            if (filteredMembers.length === 0) {
                container.innerHTML = '<div class="text-center text-neutral-500 py-8">暂无成员</div>';
                return;
            }
            
            const categoryNames = {
                'dev': '研发人员',
                'test': '测试人员',
                'arch': '架构师'
            };
            
            container.innerHTML = filteredMembers.map(member => {
                const completionRate = member.tasks > 0 ? Math.round((member.completed / member.tasks) * 100) : 0;
                const saturationColor = member.saturation >= 80 ? 'text-red-600' : member.saturation >= 60 ? 'text-orange-600' : 'text-green-600';
                return `
                    <div class="bg-neutral-50 rounded-lg p-3 hover:bg-neutral-100 transition-all">
                        <div class="flex items-center mb-2">
                            <img src="${member.avatar}" alt="${member.name}" class="w-10 h-10 rounded-full mr-3">
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-neutral-800">${member.name}</h4>
                                <p class="text-xs text-neutral-500">${categoryNames[member.category]}</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-xs">
                            <div class="text-center">
                                <div class="text-neutral-500">任务数</div>
                                <div class="font-semibold text-neutral-800">${member.tasks}</div>
                            </div>
                            <div class="text-center">
                                <div class="text-neutral-500">完成率</div>
                                <div class="font-semibold text-primary">${completionRate}%</div>
                            </div>
                            <div class="text-center">
                                <div class="text-neutral-500">饱和度</div>
                                <div class="font-semibold ${saturationColor}">${member.saturation}%</div>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
        }

        // 更新统计数据
        function updateStatistics(team) {
            const allTasks = team.tasks.month || [];
            const totalTasks = allTasks.length;
            const completedTasks = allTasks.filter(t => t.status === '已完成').length;
            const inProgressTasks = allTasks.filter(t => t.status === '进行中').length;
            const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
            const inProgressRate = totalTasks > 0 ? Math.round((inProgressTasks / totalTasks) * 100) : 0;
            
            document.getElementById('total-tasks-count').textContent = totalTasks;
            document.getElementById('completed-tasks-count').textContent = completedTasks;
            document.getElementById('inprogress-tasks-count').textContent = inProgressTasks;
            document.getElementById('deliverables-count').textContent = Math.floor(totalTasks * 1.5); // 模拟产出物数量
            
            // 更新完成率和占比
            const completedDiv = document.getElementById('completed-tasks-count').nextElementSibling;
            const inProgressDiv = document.getElementById('inprogress-tasks-count').nextElementSibling;
            if (completedDiv) completedDiv.textContent = `完成率 ${completionRate}%`;
            if (inProgressDiv) inProgressDiv.textContent = `占比 ${inProgressRate}%`;
        }

        // 关闭弹窗
        document.getElementById('close-team-modal')?.addEventListener('click', function() {
            document.getElementById('team-detail-modal').classList.add('hidden');
        });

        // 任务时间周期Tab切换
        document.addEventListener('DOMContentLoaded', function() {
            const taskTimeTabs = document.querySelectorAll('.task-time-tab');
            taskTimeTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有活跃样式
                    taskTimeTabs.forEach(t => {
                        t.classList.remove('text-primary', 'border-b-2', 'border-primary');
                        t.classList.add('text-neutral-500');
                    });
                    // 添加当前活跃样式
                    this.classList.remove('text-neutral-500');
                    this.classList.add('text-primary', 'border-b-2', 'border-primary');
                    
                    // 更新时间周期
                    currentTimePeriod = this.getAttribute('data-period');
                    const team = teamData[currentTeamName];
                    if (team) {
                        renderTaskList(team.tasks[currentTimePeriod]);
                    }
                });
            });

            // 成员分类Tab切换
            const memberCatTabs = document.querySelectorAll('.member-cat-tab');
            memberCatTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有活跃样式
                    memberCatTabs.forEach(t => {
                        t.classList.remove('bg-primary', 'text-white');
                        t.classList.add('bg-neutral-100', 'text-neutral-600');
                    });
                    // 添加当前活跃样式
                    this.classList.remove('bg-neutral-100', 'text-neutral-600');
                    this.classList.add('bg-primary', 'text-white');
                    
                    // 更新分类
                    currentMemberCategory = this.getAttribute('data-cat');
                    const team = teamData[currentTeamName];
                    if (team) {
                        renderMemberList(team.members, currentMemberCategory);
                    }
                });
            });

            // 创建团队看板
            document.getElementById('create-team-board-btn')?.addEventListener('click', function() {
                alert('创建团队看板功能开发中...');
            });
        });

        // 管理团队看板成员
        function manageTeamBoardMembers(boardId) {
            event.stopPropagation();
            alert(`管理 ${boardId} 看板成员功能开发中...`);
        }
    </script>

</body>
</html>